Box Shadow介绍

简介

box-shadow是CSS3中的一个新特性，可以在元素周围添加阴影效果。它可以很好地为元素添加立体效果，增加网页的观感，使得界面更加丰富。有时候在需要突出某些元素或给元素增加层次感时，可以使用box-shadow，它能够使元素看起来更加具有空间感。

语法

box-shadow属性可接受多个值：

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

• h-shadow：必须。水平阴影的位置，可以是负值和正值；
• v-shadow：必须。垂直阴影的位置，可以是负值和正值；
• blur：可选。模糊的距离；
• spread：可选。阴影的尺寸；
• color：可选。阴影颜色，默认为黑色；
• inset：可选。如果存在，则将阴影提到边框盒子内部，变成内阴影。

示例

以下是一个简单的示例：

.box-shadow {
  box-shadow: 2px 2px 5px #888888;
}

如上面的代码所示，这里设置了一个box-shadow，定义了水平阴影2px、垂直阴影2px，模糊距离为5px，阴影颜色为#888888灰色。

同样的，可以设置多重阴影：

.box-shadow {
  box-shadow: 0 0 5px #888888, 0 0 10px #777777;
}

如上面的代码所示，这里设置了两重阴影，分别是水平阴影和垂直阴影都为0，模糊距离分别为5px和10px，阴影颜色分别为#888888和#777777。

总结

box-shadow是CSS3中一个非常好用的特性。在实际开发中，我们可以利用它来制作出更加生动、丰富的UI效果，使得我们的网页更加优雅。