5. CSS的边框和阴影

第5章边框与阴影

CSS3 为开发者提供了强大的工具，使得我们可以更容易地为网页元素添加视觉效果。这一章将详细介绍边框和阴影的新特性，包括如何使用圆角边框、边框图像、盒阴影和文本阴影，并展示一些实际应用的例子。

5.1 圆角边框（border-radius）

border-radius 属性允许我们为元素的边框添加圆角，使得元素的外观更加柔和和现代。

语法

element {border-radius: [value];
}

value 可以是一个长度单位（如 px 或 %）或多个值的组合。

示例

单一圆角值：所有四个角的半径相同

.single-radius {border: 2px solid #333;border-radius: 10px; /* 四个角的半径都为10px */
}

不同的圆角值：为每个角设置不同的半径

.multiple-radius {border: 2px solid #333;border-radius: 10px 20px 30px 40px; /* 依次为左上，右上，右下，左下 */
}

使用百分比：相对于元素的尺寸

.percentage-radius {border: 2px solid #333;border-radius: 50%; /* 创建一个圆形或椭圆形 */
}

例子

<div class="single-radius">单一圆角值</div>
<div class="multiple-radius">不同的圆角值</div>
<div class="percentage-radius">百分比圆角值</div>

.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 属性允许我们使用图像来作为元素的边框，从而可以创建复杂和独特的边框样式。

语法

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];
}

示例

基础使用

.border-image {border: 10px solid transparent; /* 必须设置边框宽度，否则无法显示边框图像 */border-image-source: url('border.png'); /* 边框图像的路径 */border-image-slice: 30; /* 定义图像切片的区域 */
}

重复边框图像

.border-image-repeat {border: 10px solid transparent; /* 必须设置边框宽度 */border-image-source: url('border.png'); /* 边框图像的路径 */border-image-slice: 30; /* 图像切片值 */border-image-repeat: repeat; /* 重复边框图像 */
}

例子

<div class="border-image">边框图像</div>
<div class="border-image-repeat">重复边框图像</div>

.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 属性允许我们为元素添加一个或多个阴影，从而可以创造出深度和层次感。

语法

element {box-shadow: [h-offset] [v-offset] [blur] [spread] [color];
}

h-offset：水平偏移量
v-offset：垂直偏移量
blur：模糊半径
spread：阴影扩展半径
color：阴影颜色

示例

基础阴影

.box-shadow-basic {box-shadow: 10px 10px 5px #888888; /* x偏移, y偏移, 模糊半径, 颜色 */
}

内阴影

.box-shadow-inset {box-shadow: inset 10px 10px 5px #888888; /* inset关键字用于内阴影 */
}

多重阴影

.box-shadow-multiple {box-shadow: 10px 10px 5px #888888, -10px -10px 5px #cccccc; /* 多个阴影 */
}

例子

<div class="box-shadow-basic">基础阴影</div>
<div class="box-shadow-inset">内阴影</div>
<div class="box-shadow-multiple">多重阴影</div>

.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 属性允许我们为文本添加阴影效果，从而增强文本的视觉表现力。

语法

element {text-shadow: [h-offset] [v-offset] [blur] [color];
}

h-offset：水平偏移量
v-offset：垂直偏移量
blur：模糊半径
color：阴影颜色

示例

基础文本阴影

.text-shadow-basic {text-shadow: 2px 2px 2px #888888; /* x偏移, y偏移, 模糊半径, 颜色 */
}

多重文本阴影

.text-shadow-multiple {text-shadow: 2px 2px 2px #888888, -2px -2px 2px #cccccc; /* 多个阴影 */
}

例子

<p class="text-shadow-basic">基础文本阴影</p>
<p class="text-shadow-multiple">多重文本阴影</p>

.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设计的视觉效果。例如，我们可以为按钮添加圆角边框和盒阴影，使其看起来更立体和可点击；或者为卡片组件添加边框图像和阴影，使其在页面中更加突出。

示例

按钮样式

<button class="styled-button">点击我</button>

.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); /* 悬停时的阴影效果 */
}

卡片组件

<div class="card"><h2>卡片标题</h2><p>这是一段描述卡片内容的文本。</p>
</div>

.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); /* 悬停时的阴影效果 */
}