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”，就是給元素設置內陰影。

二、box-shadow應用

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

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

#########

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

###我們的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);//新增，其他所有的参数要跟橙色盒子的阴影一样，只是方向改变，这样才不会影响结合起来的效果。}

以上是box-shadow的使用技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！