詳解CSS3實現多重邊框的方法

CSS3的box-shadow用來製作多重邊框真的比較給力,這也是本文詳解CSS3實現多重邊框的方法的重點,不過在此之前我們還是先來看一下兼容性較好的傳統方式:

方法1：p嵌套實作多重邊框。

效果圖：

html程式碼

#

<p id="outer">
    <p id="inner">p嵌套实现多重边框</p>
</p>

css程式碼

#outer {   
    width: 100px;   
    height: 100px;   
    background-color: bisque;   
    border: 10px solid brown;   
    position: relative;   
}   

#inner {   
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
}   
/*#outer,
#inner {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}*/

缺點：可能無法修改結構或修改html結構成本高；多個p都設定圓角時，邊框之間無法完全貼合。圓角多邊框效果圖：

方法2：使用outline+outline-offset實作多重邊框。
如果我們只需要繪製兩層邊框，使用outline也可以做到。 outline是border外面的一層，和border原理一樣。透過設定outline的樣式可以為border外面再設定一層邊框。
但要注意的是，outline屬性設定的邊框不會隨著內部元素邊界樣式的變化而改變。也就是說，如果元素邊框帶了圓角，那麼outline繪製出的最外層邊框仍然是矩形的。這是outline繪製邊框的一個缺點。
效果圖：

html程式碼

<p id="outline">outlie实现多重边框</p>

#css程式碼

#outline {   
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
    /*-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;*/
    outline: 10px solid brown;   
    outline-offset: 0px;   
    /*border和outline之间的距离*/
    margin: 20px;   
    /*因为outline不影响布局，使用margin给边框腾位置*/
}

##優點：它跟邊框類似，可以設定各種線型，像是虛線、實線。

缺點：outline不影響佈局，需使用margin給邊框騰位置。以防被其它元素覆蓋。如果容器本身有圓角的話，描邊並不能完全貼合圓角，效果圖如下：

#方法3：使用box-shadow 外投影實作多重邊框。
box-shadow屬性可以為盒子模型設定投影。但其實它還有設定邊框的功能。 box-shadow可以傳遞五個參數，前兩個參數表示投影的偏移量，第三個參數表示投影的模糊程度，第四個參數表示投影的擴張度，最後一個參數表示投影的顏色。然而我們平常很少用到第四個參數，在這裡使用第四個參數，就可以讓投影進行擴張，透過設定比較合適的值，就可以模擬出邊框的效果了。
同樣，box-shadow屬性可以傳入多個陰影的列表，用「,」分割即可。因此，只要我們定義一個陰影列表，並且遞增的增加其擴張度參數的取值，就可以繪製出多重邊框的效果了。
效果圖：

html程式碼

<p id="boxShadow">boxshadow实现多重边框(外投影)</p>

#css程式碼

#boxShadow {   
    margin: 40px;   
    /*因为box-shadow不影响布局，使用margin给边框腾出位置*/
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
    -webkit-border-radius: 5px;   
    -moz-border-radius: 5px;   
    border-radius: 5px;   
    -webkit-box-shadow: 0 0 0 10px brown;   
    box-shadow: 0 0 0 10px brown;   
    /*参数分别为：水平偏移量、垂直偏移量、模糊距离、向外扩展距离和投影颜色*/
}

##優點：多個圓角邊框之間完全貼合；同時還可以接收一個列表，一次設定多個投影（即邊框）。它的擴張效果是根據元素自己的形狀來的，如果元素是矩形，它擴張開來就是一個更大的矩形；如果元素有圓角，它也會擴張出圓角。

缺點：CSS3屬性，相容性不好；box-shadow也不影響佈局的，如果這個元素和其它元素的相對位置關係很重要，需要以外邊距等方式來為這些多出來的「邊框」 騰出位置，以防被其它元素覆蓋。

注意：使用內嵌投影（即box-shadow新增參數為inset，預設不設定時為外陰影）似乎是更好的選擇。因為內嵌投影讓投影出現在元素內部，設定內邊距在元素的內部給予多個邊框騰位置，處理起來比較容易一些。

方法4：使用box-shadow 內投影實作多重邊框。 (建議使用)

效果圖：

html程式碼

<p id="moreboxShadow">boxshadow实现多重边框(内投影)</p>

css程式碼

/*使用box-shadow一次性设置多个边框，并且使用内嵌投影*/
#moreboxShadow {   
    width: 120px;   
    height: 120px;   
    border: 8px solid blue;   
    /*注意：向外扩张的距离要每次累加；内嵌投影即添加参数为inset,该参数可选，当不设置时即为外投影*/
    -webkit-box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   
    box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   
    padding: 30px;   
    /*设置内边距，为box-shadow添加的添加的边框疼位置，这样就不会影响元素之间的位置*/
}

優點：內嵌投影讓投影出現在元素內部，設定內邊距在元素的內部給予多個邊框騰位置，處理起來更容易一些。

缺點：CSS3屬性，相容性不好

以上是詳解CSS3實現多重邊框的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！