CSS3实现DIV块的阴影效果

在css中，给div添加阴影效果主要使用box-shadow属性

语法:
box-shadow: x-offset y-offset blur spread color style;

说明：

box-shadow属性的参数非常多，每一个参数说明如下。

• （1）x-offset：定义水平阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此x-offset取值为正时，向右偏移；取值为负时，向左偏移。
• （2）y-offset：定义垂直阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此y-offset取值为正时，向下偏移；取值为负时，向上偏移。
• （3）blur：定义阴影的模糊半径，只能为正值。
• （4）spread：定义阴影的大小。
• （5）color：定义阴影的颜色。
• （6）style：定义是外阴影还是内阴影。

示例：

<div class="box"></div>

.box{
    width: 300px;
    height: 300px;
    background: #fff;
    margin: 0 auto;
    box-shadow: 2px 2px 10px #909090; //水平阴影偏移距离 垂直阴影偏移距离 模糊半径 阴影颜色(这里面省略了spread和style参数) 
}

效果如下：