接上篇：http://blog.csdn.net/u010037043/article/details/47035077
一、box-shadow
box-shadow是给元素块添加周边阴影效果。
box-shadow: inset X-offset Y-offset blur spread color ;
box-shadow:[投影方式] X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色
阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取值“inset”，其投影为内阴影；
X-offset:阴影水平偏移量，其值可以是正负值。
Y-offset:阴影垂直偏移量，其值也可以是正负值。
阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，建议不要省略此参数。
做了几个demo帮大家看看各个参数的作用：
下图投影方式为inset
下图投影方式为outset
浏览器支持如下：
二、demo中的box-shadow
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15)
0 -0.1em .3em,hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%)
0 .3em 1px,rgba(0,0,0,0.2) 0 .5em 5px;
为了大家看的更明显，我将demo中的box-shadow的outset类型的位置调整了，将inset类型的颜色改变了。可以看出对于demo中的button，模拟的是光从上方打过来。因此，button表面的投影，即inset类型的投影为高亮型，且半透明。
button的下部分为光打不到的地方，因此outset类型的投影越来越深，最后一个为灰色，是为了让整个button在二维平面中有立体效果。
demo戳链接http://runjs.cn/detail/jduic0cj
版权声明：本文为博主原创文章，未经博主允许不得转载。