第5章 边框与阴影
CSS3 为开发者提供了强大的工具，使得我们可以更容易地为网页元素添加视觉效果。这一章将详细介绍边框和阴影的新特性，包括如何使用圆角边框、边框图像、盒阴影和文本阴影，并展示一些实际应用的例子。
5.1 圆角边框（border-radius）
border-radius 属性允许我们为元素的边框添加圆角，使得元素的外观更加柔和和现代。
语法
css
复制代码
element {
border-radius: [value];
}
value 可以是一个长度单位（如 px 或 %）或多个值的组合。
示例
单一圆角值：所有四个角的半径相同
css
复制代码
.single-radius {
border: 2px solid #333;
border-radius: 10px; /* 四个角的半径都为10px */
}
不同的圆角值：为每个角设置不同的半径
css
复制代码
.multiple-radius {
border: 2px solid #333;
border-radius: 10px 20px 30px 40px; /* 依次为左上，右上，右下，左下 */
}
使用百分比：相对于元素的尺寸
css
复制代码
.percentage-radius {
border: 2px solid #333;
border-radius: 50%; /* 创建一个圆形或椭圆形 */
}
例子
html
复制代码
css
复制代码
.single-radius {
width: 100px; /* 固定宽度 */
height: 100px; /* 固定高度 */
border: 2px solid #333; /* 边框宽度和颜色 */
border-radius: 10px; /* 四个角的半径都为10px */
}
.multiple-radius {
width: 100px; /* 固定宽度 */
height: 100px; /* 固定高度 */
border: 2px solid #333; /* 边框宽度和颜色 */
border-radius: 10px 20px 30px 40px; /* 依次为左上，右上，右下，左下 */
}
.percentage-radius {
width: 100px; /* 固定宽度 */
height: 100px; /* 固定高度 */
border: 2px solid #333; /* 边框宽度和颜色 */
border-radius: 50%; /* 圆角半径为元素尺寸的一半，创建一个圆形 */
}
5.2 边框图像（border-image）
border-image 属性允许我们使用图像来作为元素的边框，从而可以创建复杂和独特的边框样式。
语法
css
复制代码
element {
border-image-source: url(image.png);
border-image-slice: [value];
border-image-width: [value];
border-image-outset: [value];
border-image-repeat: [stretch | repeat | round | space];
}
示例
基础使用
css
复制代码
.border-image {
border: 10px solid transparent; /* 必须设置边框宽度，否则无法显示边框图像 */
border-image-source: url('border.png'); /* 边框图像的路径 */
border-image-slice: 30; /* 定义图像切片的区域 */
}
重复边框图像
css
复制代码
.border-image-repeat {
border: 10px solid transparent; /* 必须设置边框宽度 */
border-image-source: url('border.png'); /* 边框图像的路径 */
border-image-slice: 30; /* 图像切片值 */
border-image-repeat: repeat; /* 重复边框图像 */
}
例子
html
复制代码
css
复制代码
.border-image {
width: 200px; /* 固定宽度 */
height: 200px; /* 固定高度 */
border: 10px solid transparent; /* 必须设置边框宽度 */
border-image-source: url('border.png'); /* 使用的边框图像 */
border-image-slice: 30; /* 定义图像切片的区域 */
}
.border-image-repeat {
width: 200px; /* 固定宽度 */
height: 200px; /* 固定高度 */
border: 10px solid transparent; /* 必须设置边框宽度 */
border-image-source: url('border.png'); /* 使用的边框图像 */
border-image-slice: 30; /* 定义图像切片的区域 */
border-image-repeat: repeat; /* 图像重复填充边框 */
}
5.3 盒阴影（box-shadow）
box-shadow 属性允许我们为元素添加一个或多个阴影，从而可以创造出深度和层次感。
语法
css
复制代码
element {
box-shadow: [h-offset] [v-offset] [blur] [spread] [color];
}
h-offset：水平偏移量
v-offset：垂直偏移量
blur：模糊半径
spread：阴影扩展半径
color：阴影颜色
示例
基础阴影
css
复制代码
.box-shadow-basic {
box-shadow: 10px 10px 5px #888888; /* x偏移, y偏移, 模糊半径, 颜色 */
}
内阴影
css
复制代码
.box-shadow-inset {
box-shadow: inset 10px 10px 5px #888888; /* inset关键字用于内阴影 */
}
多重阴影
css
复制代码
.box-shadow-multiple {
box-shadow: 10px 10px 5px #888888, -10px -10px 5px #cccccc; /* 多个阴影 */
}
例子
html
复制代码
css
复制代码
.box-shadow-basic {
width: 100px; /* 固定宽度 */
height: 100px; /* 固定高度 */
background-color: #ddd; /* 背景颜色 */
box-shadow: 10px 10px 5px #888888; /* 水平偏移10px, 垂直偏移10px, 模糊半径5px, 阴影颜色#888 */
}
.box-shadow-inset {
width: 100px; /* 固定宽度 */
height: 100px; /* 固定高度 */
background-color: #ddd; /* 背景颜色 */
box-shadow: inset 10px 10px 5px #888888; /* 内阴影, 水平偏移10px, 垂直偏移10px, 模糊半径5px, 阴影颜色#888 */
}
.box-shadow-multiple {
width: 100px; /* 固定宽度 */
height: 100px; /* 固定高度 */
background-color: #ddd; /* 背景颜色 */
box-shadow: 10px 10px 5px #888888, -10px -10px 5px #cccccc; /* 两个阴影, 第一个向右下, 第二个向左上 */
}
5.4 文本阴影（text-shadow）
text-shadow 属性允许我们为文本添加阴影效果，从而增强文本的视觉表现力。
语法
css
复制代码
element {
text-shadow: [h-offset] [v-offset] [blur] [color];
}
h-offset：水平偏移量
v-offset：垂直偏移量
blur：模糊半径
color：阴影颜色
示例
基础文本阴影
css
复制代码
.text-shadow-basic {
text-shadow: 2px 2px 2px #888888; /* x偏移, y偏移, 模糊半径, 颜色 */
}
多重文本阴影
css
复制代码
.text-shadow-multiple {
text-shadow: 2px 2px 2px #888888, -2px -2px 2px #cccccc; /* 多个阴影 */
}
例子
html
复制代码
基础文本阴影
多重文本阴影
css
复制代码
.text-shadow-basic {
font-size: 24px; /* 字体大小 */
color: #333; /* 字体颜色 */
text-shadow: 2px 2px 2px #888888; /* 水平偏移2px, 垂直偏移2px, 模糊半径2px, 阴影颜色#888 */
}
.text-shadow-multiple {
font-size: 24px; /* 字体大小 */
color: #333; /* 字体颜色 */
text-shadow: 2px 2px 2px #888888, -2px -2px 2px #cccccc; /* 两个阴影, 第一个向右下, 第二个向左上 */
}
5.5 边框与阴影的实际应用
在实际应用中，边框和阴影可以用来提升UI设计的视觉效果。例如，我们可以为按钮添加圆角边框和盒阴影，使其看起来更立体和可点击；或者为卡片组件添加边框图像和阴影，使其在页面中更加突出。
示例
按钮样式
html
复制代码
css
复制代码
.styled-button {
padding: 10px 20px; /* 内边距，增加按钮的点击区域 */
border: none; /* 移除默认边框 */
border-radius: 5px; /* 圆角边框 */
background-color: #3498db; /* 按钮背景颜色 */
color: white; /* 按钮文字颜色 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 盒阴影 */
transition: box-shadow 0.3s ease; /* 盒阴影变化的过渡效果 */
}
.styled-button:hover {
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
}
卡片组件
html
复制代码
卡片标题
这是一段描述卡片内容的文本。
css
复制代码
.card {
width: 300px; /* 固定宽度 */
padding: 20px; /* 内边距 */
border: 1px solid transparent; /* 边框设置为透明以使用边框图像 */
border-radius: 10px; /* 圆角边框 */
background: #fff; /* 背景颜色 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 盒阴影 */
transition: box-shadow 0.3s ease; /* 盒阴影变化的过渡效果 */
}
.card:hover {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
}
实例分析
按钮样式分析
上述代码示例中，我们为按钮添加了圆角边框和盒阴影：
border-radius: 5px;：使按钮的边角变得圆润。
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);：为按钮添加了轻微的阴影，使其看起来有浮动的效果。
transition: box-shadow 0.3s ease;：添加平滑过渡效果，使得在悬停时阴影变化更自然。
:hover 伪类用于定义悬停状态下的阴影效果，增加了按钮的交互感。
卡片组件分析
卡片组件的代码展示了如何结合多种CSS3特性来实现美观的设计：
border-radius: 10px;：为卡片的边角添加圆角效果，增加视觉柔和感。
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);：添加轻微的阴影，使卡片在页面中看起来更立体。
transition: box-shadow 0.3s ease;：平滑的过渡效果让卡片在悬停时显得更加自然。
:hover 伪类下，阴影效果增强，使得卡片在悬停时看起来更加突出。
这些特性和技术不仅提升了网页的视觉效果，还提高了用户的体验。通过适当地使用这些特性，我们可以设计出更加吸引人的网页。
小结
在这一章中，我们详细探讨了CSS3中边框和阴影的各种新特性，包括border-radius、border-image、box-shadow 和 text-shadow。