做一個萌萌噠的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