使用CSS邊框特效實現技巧分享

半透明的邊框如何實現？多重邊框如何實現？這篇文章使用CSS邊框特效實現技巧分享，有興趣的夥伴們可以參考一下

本文為大家分享了CSS邊框特效實現技巧，供大家參考，具體內容如下

一、半透明的邊框實作

加入我們有這樣一個需求：在一個背景圖片的區域中，定義一個有半透明白色邊框的白色p。這個的實作方法最先想到的就是可以為邊框定義透明度，程式碼如下：

p{   
background:white;   
border:20px solidhsla(0,0%,100%,.5);   
}

#這裡hsla為定義顏色的方法，它的各個參數意義如下：

H：Hue(色調)。 0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360

S：Saturation(飽和度)。值為：0.0% - 100.0%

L：Lightness(亮度)。值為：0.0% - 100.0%

A：Alpha透明度。取值0~1之間

 在瀏覽器中執行上述的樣式設定，發現其實並沒有出現我們想要的結果。 p還只是一個沒有任何邊框效果的純白色p。

 這個問題出現的原因是：白色的p擋住了半透明的白色邊框。因為如果為一個p設定為白色，那麼這個p的盒子模型整個顏色都是白色的。如果設定了半透明的白色邊框，放到這個白色的p中是顯示不出來的(被p的白色襯託的沒有辦法顯示出邊框)。

要想解決這個問題，需要用到CSS3中的新屬性——background-clip。 background-clip規定了背景的繪製區域：

border-box         背景被裁切到邊框盒 

padding-box      背景被自我裁剪 box       背景裁切到內容框 

預設情況下，background-clip的值為border-clip，也就是說整個和模型都應用定義的背景，在我們上面的例子中也就是整個p一直到邊框外圍都是白色。所以如果我們將background-clip屬性值設定為padding-box，即可將外部的邊框不填滿顏色，就能顯示出設定的半透明邊框了，程式碼如下：

p{   
       background:white;   
       border:20pxsolid hsla(0,0%,100%,.5);   
       background-clip:padding-box;   
}

這樣設定的樣式在瀏覽器中重新運行，就會出現預想的白色半透明邊框效果了。

二、多重邊框

有的時候為了元素的特別效果，可能需要為元素添加多重的邊框，下面介紹兩種添加多重邊框的方法。

1.box-shadowbox-shadow屬性可以為盒子模型設定投影。但其實它還有設定邊框的功能。

box-shadow可以傳遞五個參數，前兩個參數表示投影的偏移量，第三個參數表示投影的模糊程度，第四個參數表示投影的擴張度，最後一個參數表示投影的顏色。然而我們平常很少用到第四個參數，在這裡使用第四個參數，就可以讓投影進行擴張，透過設定比較合適的值，就可以模擬出邊框的效果了。

同樣，box-shadow屬性可以傳入多個陰影的列表，用「,」分割即可。因此，只要我們定義一個陰影列表，並且遞增的增加其擴張度參數的取值，就可以繪製出多重邊框的效果了。

2.outline#如果我們只需要繪製兩層邊框，使用outline也可以做到。 outline是border外面的一層，和border原理一樣。透過設定outline的樣式可以為border外面再設定一層邊框。

但要注意的是，outline屬性設定的邊框不會隨著內部元素邊界樣式的變化而改變。也就是說，如果元素邊框帶了圓角，那麼outline繪製出的最外層邊框仍然是矩形的。這是outline繪製邊框的一個缺點。

以上就是本文的全部內容，希望大家能熟練CSS邊框實現技巧，謝謝大家的閱讀。

以上是使用CSS邊框特效實現技巧分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！