box-shadow的應用技巧，box-shadow應用技巧

box-shadow的應用技巧，box-shadow應用技巧
一、box-shadow的參數解析

box-shadow:none;

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

box-shadow參數解析

值	描述
none	預設值，元素沒有任何陰影製作效果。
h-shadow	陰影水平位移量，其值可以是正負值。如果取正值，則陰影在元素的右邊，反之取負值，陰影在元素的左邊。
v-shadow	陰影垂直位移量，其值可以是正負值。如果取正值，則陰影在元素的底部，反之取負值，陰影在元素的頂部。
blur	陰影模糊半徑，選擇性參數。其值只能是正值，如果取值為“0”時，表示陰影不具有模糊效果，如果取值越大，陰影的邊緣就越模糊。
spread	陰影擴充半徑，選擇性參數。其值可以是正負值，如果取值為正值，則整個陰影都延展擴大，反之取值為負值，則整個陰影都縮小。
color	陰影顏色，選擇性參數，如果不設定任何顏色時，瀏覽器會取預設色，但各瀏覽器預設色不一樣，特別是在Webkit核心下的瀏覽器將無色，也就是透明，建議不要省略這個參數。
inset	陰影類型，可選值。如果不設定，其預設的投影方式是外陰影；如果取其唯一值“inset”，就是給元素設定內陰影。

此處參考http://blog.csdn.net/baidu_31345523/article/details/50264869

二、box-shadow應用

在說明我們這個應用之前，先給大家推薦一個網站http://www.css88.com/tool/css3Preview/Box-Shadow.html，這個網站裡面可以調試盒子模型陰影，文字陰影，圓角等，功能挺多的，調試完之後可以直接複製代碼

我們接下來要做的效果，是這樣的

注意這個地區，白色的盒子模型上面遺留著上面橙色盒子的邊框陰影，這個效果怎麼做呢？

<div class="contain">    <div class="contain-wrapper">            </div>    <div class="foot-wrapper">            </div></div>    

我們的html代碼就這些，很明顯綠色地區是contain，橙色是contain-wrapper，白色是foot-wrapper。
我們來寫他們的css代碼

*{    margin:0;    padding: 0;}.contain{    overflow: hidden;    margin: 0 auto;    width: 250px;    height: 300px;    background-color: #09b800;}.contain-wrapper{    margin: 0 auto;    margin-top: 10px;    width: 200px;    height: 100px;    background: #ff7e00;    border-radius: 10px;    box-shadow: 0px 9px 15px -1px rgba(0,0,0,0.3);}.foot-wrapper{    margin: 0 auto;    width: 180px;    height: 100px;    background: white;}

我們給橙色盒子設定了邊框陰影，橙色盒子的下邊框和白色盒子的上邊框緊密地貼在一起，這時候，問題出現了，我們來看看效果

 

我們發現橙色盒子的下邊框的陰影被白色盒子給遮住了，這可如何是好？我是用一個特別猥瑣的方法解決的。

既然陰影被遮住了，那麼我們就讓白色盒子補償給橙色盒子一條陰影，不是有一個參數叫做inset嗎？我們把白色盒子的上邊框的陰影往裡面投影，補上這個空缺不就好了嗎？

 

*{    margin:0;    padding: 0;}.contain{    overflow: hidden;    margin: 0 auto;    width: 250px;    height: 300px;    background-color: #09b800;}.contain-wrapper{    margin: 0 auto;    margin-top: 10px;    width: 200px;    height: 100px;    background: #ff7e00;    border-radius: 10px;    box-shadow: 0px 9px 15px -1px rgba(0,0,0,0.3);}.foot-wrapper{    margin: 0 auto;    width: 180px;    height: 100px;    background: white;        box-shadow: inset 0 9px 5px -1px rgba(0,0,0,0.1);//新增，其他所有的參數要跟橙色盒子的陰影一樣，只是方向改變，這樣才不會影響結合起來的效果。}