CSS3中的box-shadow 属性

用于创建盒子阴影

语法

box-shadow:offset-x offset-y blur spread color position(可选)

offset-x

指定阴影的水平偏移量。即在x轴上阴影的位置。正值使阴影出现在元素的右边，而负值使阴影出现在元素的左边。

offset-y

指定阴影的垂直偏移量。即在y轴上阴影的位置。正值使阴影出现在元素的下边，而负值使阴影出现在元素的上边。

blur

指定阴影的模糊程度,值越大越模糊。

spred

指定阴影的延伸尺寸，值越大，增加的越多。

color

指定了阴影的颜色

position

指定阴影的位置，可以使用inset变成内部阴影

Some Demo

---

多重阴影

box-shadow 属性能在单个元素上接受多个阴影。每个阴影通过用逗号分隔的 box-shadow 属性列表来加载。

box-shadow: 20px 20px 20px 10px blue;
-20px -20px 20px 10px black

圆形阴影

box-shadow: 20px 20px 20px 10px blue,
border-radius: 50%;