做一个萌萌哒的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