CSS box-shadow 边框阴影

box-shadow 是 CSS3 中一个非常有用的属性，它可以让我们为元素添加阴影效果。在实现一些美观的效果时，box-shadow 的使用频率非常高，比如为按钮添加浅色的边框阴影、为图片添加阴影等。

语法

box-shadow 属性的语法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

参数的含义如下：

• h-shadow：必须指定的水平阴影距离。可以为负值。
• v-shadow：必须指定的垂直阴影距离。可以为负值。
• blur：可选的模糊距离。值越大，模糊程度越高。默认值为 0。
• spread：可选的阴影大小。正值会扩大阴影半径，负值会缩小阴影半径。默认值为 0。
• color：可选的阴影颜色。默认值为黑色(#000)。可以设置为 RGBA 颜色。
• inset：可选的关键字，表示阴影是内阴影(在边框内部)还是外阴影(在边框外部)。默认为外阴影。

示例

/* 为按钮添加浅色的边框阴影 */
.btn {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

/* 为图片添加内阴影 */
.img {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

/* 为元素添加多重阴影 */
.content {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5),
              0 0 10px rgba(0, 0, 0, 0.2) inset;
}

兼容性

box-shadow 是个比较新的 CSS3 属性，不支持 IE6-IE8 和 Firefox 3.5 以前的版本。如果要兼容老版本浏览器，可以考虑使用 IE filter 属性、CSS3Pie 或 Modernizr 等方案。

总结

box-shadow 可以为元素添加阴影效果，非常方便。在实际使用中，可以结合其他 CSS3 属性一起使用，制作出更加生动、美观的效果。