CSS3新增加了很多非常重要的属性，box-shadow就是其中之一。其主要功能就是为指定标签或者元素增加阴影，而且他可以模糊化并且它可以模拟边框、光晕、层叠等视觉效果。提升了现代化WEB网页的显示效果和移动端效果的提升。以下是 box-shadow 的详细用法让我们来逐步了解它。
1、box-shadow基本使用方法
box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩散范围] [颜色] [inset];先了解它的参数以便我们更好的知道它的使用方法。
2、box-shadow参数说明
| 详细参数 | 参数说明及用法 | |
|---|---|---|
| x-offset | 水平偏移 | 阴影水平方向偏移量（正右负左） |
| y-offset | 垂直偏移 | 阴影垂直方向偏移量（正下负上） |
| blur-radius | 模糊半径 | 值越大，阴影越模糊（0 = 锐利阴影）。 |
| spread-radius | 扩散范围 | 控制阴影大小（正值扩大，负值收缩）。 |
| color | 颜色 | 阴影颜色（支持 rgba 透明度）例如：rgba(R色值，G色值，B色值，透明度) |
| inset | 可选 | 阴影向内扩散（默认外阴影） |
通过参数的了解我们就很直观的知道每个参数的详细表达。例如：
.box {
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
}这里表示我们为.box增加了一个阴影效果，水平偏移 0 垂直偏移 0 模糊半径 15px 扩散范围 15px rgba色值和0.3的透明度。通过以上代码是我们能看到效果为：元素四周均匀模糊（类似发光边框），如图
通过图片我们可以直观的看到盒子四周均产生了15像素的扩散阴影。当然我们可以修改其参数然后观察其变化，能够让你更好的掌握它。下面列举一些常用box-shadow阴影设计方法。
1、四周虚化边框
.box {
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
}2、单侧虚化下边框
.box {
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.5);
}3、内阴影效果
.box {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}4、多层阴影效果
.box {
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.1), /* 第一层浅阴影 */
0 5px 15px rgba(0, 0, 0, 0.2); /* 第二层深阴影 */
}3、box-shadow实战技巧
3.1 为什么 box-shadow 不显示？
- 元素尺寸问题：确保 .box 有宽度/高度（如 width: 100px; height: 100px;）
- 背景遮挡：如果父元素背景色与阴影颜色相同，阴影会被遮盖。
- 浏览器兼容性：极旧浏览器（如 IE8）不支持 box-shadow。
3.2 如何控制阴影范围？扩大阴影：
- 增加 spread-radius（如 0 0 10px 10px）。
- 收缩阴影：使用负值（如 0 10px 10px -5px）。
以上即是box-shadow的使用方法，通过灵活调整参数，你可以实现从柔和光晕到锋利投影的各种效果，能够对你的web设计增加一定的优秀视觉效果。