盒子阴影 - CSS

CSS 盒子阴影（Box Shadow）属性可以为元素添加阴影效果，使其看起来离页面更加立体和真实。

语法

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

参数说明：

• h-shadow：水平阴影的位置。取值为正值时，表示位于元素右侧；取值为负值时，表示位于元素左侧。
• v-shadow：垂直阴影的位置。取值为正值时，表示位于元素下方；取值为负值时，表示位于元素上方。
• blur：模糊距离。取值为0时，表示阴影不具有模糊效果；取值越大，则模糊程度越高。如果省略该值，则默认值为0。
• spread：阴影的大小。取值为0时，表示阴影大小和元素大小一致；取值越大，则阴影面积越大。如果省略该值，则默认值为0。
• color：阴影的颜色。可以使用颜色关键词、十六进制值或RGB值来设置。如果省略该值，则默认颜色为黑色。
• inset：阴影效果是否内嵌。如果设置为“inset”，则表示为元素添加的是内嵌阴影，否则为普通阴影。该参数可省略。

示例

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

上述代码表示为元素添加了一个水平位置为10像素、垂直位置为10像素、横向模糊半径为5像素、阴影大小为0像素、颜色为 #888888 的普通阴影效果。

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

上述代码表示为元素添加了一个水平位置为5像素、垂直位置为5像素、横向模糊半径为10像素、阴影大小为0像素、颜色为 #888888 的内嵌阴影效果。

注意事项

• 如果只需要添加普通阴影或内嵌阴影的一种效果，可以省略模糊距离、阴影大小和颜色参数之一。
• 建议给阴影设置一个颜色值，以使阴影效果更加明显。