CSS3阴影box-shadow

box-shadow是向盒子添加阴影，支持添加一个或者多个。

很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法：

box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]

①X轴偏移量 必须，水平阴影的位置，允许负值；

②Y轴偏移量 必须，垂直阴影的位置，允许负值；

③阴影模糊半径 可选，模糊距离；

④阴影扩展半径 可选，阴影的尺寸；

⑤阴影颜色 可选，阴影的颜色，省略默认为黑色；

⑥投影方式 可选，设置为inset时为内部阴影方式，省略为外部阴影方式。

注意：inset可以写在参数的第一个或最后一个，其它位置是无效的。

.boxshadow-outset{

width:100px;

height:100px;

box-shadow:4px 4px 6px #666

}

效果如下：

.boxshadow-outset{

width:100px;

height:100px;

box-shadow:4px 2px 6px #333333 inset

}

效果如下：

.boxshadow-outset{

width:100px;

height:100px;

box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset

}

效果如下：

.boxshadow-outset{

width:100px;

height:100px;

box-shadow:-4px 4px 6px #666

}

效果如下：

.boxshadow-outset{

width:100px;

height:100px;

box-shadow:4px -4px 6px #666

}

效果如下：