CSS中的box-shadow

在CSS中，box-shadow属性可以用于给 HTML 元素添加阴影效果。这个属性可以设置阴影的颜色、大小和位置。

语法

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

• h-shadow：水平阴影的位置。允许负值表示阴影框在元素左侧。
• v-shadow：垂直阴影的位置。允许负值表示阴影框在元素上方。
• blur：模糊距离。
• spread：阴影的尺寸。正值会扩大阴影，负值会缩小。
• color：阴影颜色。可以使用CSS颜色值，也可以使用关键字。
• inset：设置阴影的类型。如果设置为inset，则表示内阴影，否则表示外阴影。

使用示例

/* 设置具有左边、右边和底部阴影的盒子 */
box-shadow: 10px 0 5px -2px #888, -10px 0 5px -2px #888, 0 10px 5px -2px #888;

/* 设置具有内阴影的按钮 */
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);

以上示例中，第一个示例设置了一个有左边、右边和底部阴影的盒子，阴影颜色为#888，阴影大小为5px，偏移量为10px和-10px。第二个示例设置了一个具有内阴影的按钮，阴影颜色为rgba(0,0,0,0.3)，大小为5px。

注意： box-shadow 属性是CSS3属性，不支持IE9及以下版本。