第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
<div class="single-radius">单一圆角值</div>
<div class="multiple-radius">不同的圆角值</div>
<div class="percentage-radius">百分比圆角值</div>
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
<div class="border-image">边框图像</div>
<div class="border-image-repeat">重复边框图像</div>
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
<div class="box-shadow-basic">基础阴影</div>
<div class="box-shadow-inset">内阴影</div>
<div class="box-shadow-multiple">多重阴影</div>
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
<p class="text-shadow
-basic">基础文本阴影</p>
<p class="text-shadow-multiple">多重文本阴影</p>
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<button class="styled-button">点击我</button>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<div class="card"> <h2>卡片标题</h2> <p>这是一段描述卡片内容的文本。</p> </div>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。