CSS3的box-shadow属性可以给元素添加一个阴影或者多个阴影效果（用逗号分隔添加阴影列表）。

box-shadow使用

语法：

选择器 {    box-shadow: offset-x offset-y blur spread color position；}

解释：

值

说明

offset-x

必需的。水平阴影的位置。允许负值

offset-y

必需的。垂直阴影的位置。允许负值

blur

可选。模糊距离

spread

可选。阴影的大小

color

可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

position

可选。从外层的阴影(开始时)改变阴影内侧阴影

示例：

div {    width: 100px;    height: 100px;    background-color: green;}

解析：

给一个div元素添加了宽、高、背景色，没有添加border-shadow属性是如上效果。

offset-x

div {    代码省略    box-shadow: 10px 0;}

offset-x的值分别设置-10px和10px

offset-x = -10px

offset-x = 10px

当offset-x设置正值，向右偏移；设置负值，向左偏移

offset-y

div {    代码省略    box-shadow: 10px 0;}

offset-y的值分别设置-10px和10px

offset-y = -10px

offset-y = 10px

当offset-y设置正值，向下偏移；设置负值，向上偏移

blur

阴影的模糊程度，不能设置负值

div {    代码省略    box-shadow: 10px 0 5px;}

blur = 5px模糊效果

div {    代码省略    box-shadow: 10px 0 15px;}

blur = 15px模糊效果

blur值设置越大，越模糊

spread

向外扩展阴影多大。在阴影的宽高外，继续加大。如果是负数，则是缩小。

div {    代码省略    box-shadow: 10px 0 15px 15px;}

spread=15px阴影外扩

div {    代码省略    box-shadow: 10px 0 15px -5px;}

spread=-5px阴影缩小

color

阴影的颜色，默认为黑色。

div {    代码省略    box-shadow: 10px 0 15px 0 yellow;}

position

默认设置的是外阴影，如需设置内阴影，则设置为inset

div {    代码省略    box-shadow: 10px 0 15px 0 yellow inset;}

给一个元素可以添加多个阴影效果

div {    代码省略    box-shadow: 10px 0 15px 0 red,    12px 0 15px 0 blue,    14px 0 15px 0 green;}