做一个萌萌哒的button之box-shadow

接上篇：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