css3的box-shadow的使用

1、语法

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

h-shadow ​：必选。水平阴影的位置，允许负值（向左移）。

v-shadow​：必选。垂直阴影的位置，允许负值（向上移）。

blur​：模糊距离（值越大图像越模糊）。

spread​：阴影的尺寸（值越大，水平阴影和垂直阴影的值同时加上spread阴影尺寸的值）。

color​：阴影的颜色。

inset​：将外部阴影 (outset) 改为内部阴影。

​

2、实例

​（1）box-shadow: 20px 20px 5px #888888;

水平（20px） 垂直（20px） 模糊（5px） 阴影尺寸（0px）

（2）box-shadow: 50px 30px 5px 20px #888888; 

    阴影尺寸设置为20px，水平阴影距离=50px+20px,垂直阴影距离=30px+20px

 

（3）box-shadow: -50px -30px 5px 20px #888888;

    水平为负值向左移，垂直为负值向上移

​

 

（4）box-shadow: 50px 30px 5px 20px #888888 inset;​

       inset 将外部阴影 (outset) 改为内部阴影

​（5）box-shadow: -50px -30px 5px 20px #888888 inset;

3、希望了解更详细的box-shadow，可参考http://www.w3cplus.com/content/css3-box-shadow/。