CSS3新增属性box-shadow详细实例解答

CSS3新增加了很多非常重要的属性，box-shadow就是其中之一。其主要功能就是为指定标签或者元素增加阴影，而且他可以模糊化并且它可以模拟边框、光晕、层叠等视觉效果。提升了现代化WEB网页的显示效果和移动端效果的提升。以下是 box-shadow 的详细用法让我们来逐步了解它。

1、box-shadow基本使用方法

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩散范围] [颜色] [inset];

先了解它的参数以便我们更好的知道它的使用方法。

2、box-shadow参数说明

通过参数的了解我们就很直观的知道每个参数的详细表达。例如：

.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设计增加一定的优秀视觉效果。