本文為大家分享了CSS邊框特效實(shí)現(xiàn)技巧，供大家參考，具體內(nèi)容如下

一、半透明的邊框?qū)崿F(xiàn)

加入我們有這樣一個(gè)需求：在一個(gè)背景圖片的區(qū)域中，定義一個(gè)帶有半透明白色邊框的白色div。這個(gè)的實(shí)現(xiàn)方法最先想到的就是可以為邊框定義透明度，代碼如下：

這里hsla為一種定義顏色的方法，它的各個(gè)參數(shù)含義如下：

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

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

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

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

 在瀏覽器中運(yùn)行上述的樣式設(shè)定，發(fā)現(xiàn)其實(shí)并沒有出現(xiàn)我們想要的結(jié)果。div還只是一個(gè)沒有任何邊框效果的純白色div。

 這個(gè)問題出現(xiàn)的原因是：白色的div擋住了半透明的白色邊框。因?yàn)槿绻麨橐粋€(gè)div設(shè)定為白色，那么這個(gè)div的盒子模型整個(gè)顏色都是白色的。如果設(shè)定了半透明的白色邊框，放到這個(gè)白色的div中是顯示不出來的(被div的白色襯托的沒有辦法顯示出邊框)。

要想解決這個(gè)問題，需要用到CSS3中的新屬性——background-clip。background-clip規(guī)定了背景的繪制區(qū)域：

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

padding-box      背景被裁剪到內(nèi)邊距框            

content-box       背景被裁剪到內(nèi)容框 

默認(rèn)情況下，background-clip的值為border-clip，也就是說整個(gè)和模型都應(yīng)用定義的背景，在我們上面的例子中也就是整個(gè)div一直到邊框外圍都是白色。所以如果我們將background-clip屬性值設(shè)定為padding-box，即可將外部的邊框不填充顏色，就能顯示出設(shè)定的半透明邊框了，代碼如下：

這樣設(shè)定的樣式在瀏覽器中重新運(yùn)行，就會(huì)出現(xiàn)預(yù)想的白色半透明邊框效果了。

二、多重邊框

有的時(shí)候?yàn)榱嗽氐奶貏e效果，可能需要為元素添加多重的邊框，下面介紹兩種添加多重邊框的方法。

1.box-shadow

box-shadow屬性可以為盒模型設(shè)定投影。但是其實(shí)它還有設(shè)定邊框的功能。

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

同樣，box-shadow屬性可以傳入多個(gè)陰影的列表，用“,”分割即可。因此，只要我們定義一個(gè)陰影列表，并且遞增的增加其擴(kuò)張度參數(shù)的取值，就可以繪制出多重邊框的效果了。

2.outline

如果我們只需要繪制兩層邊框，使用outline也可以做到。outline是border外面的一層，和border原理一樣。通過設(shè)定outline的樣式可以為border外面再設(shè)定一層邊框。

但是需要注意的是，outline屬性設(shè)定的邊框不會(huì)隨著內(nèi)部元素邊界樣式的變化而變化。也就是說，如果元素邊框帶了圓角，那么outline繪制出的最外層邊框仍然是矩形的。這是outline繪制邊框的一個(gè)缺憾。

以上就是本文的全部內(nèi)容，希望大家能夠熟練掌握CSS邊框?qū)崿F(xiàn)技巧，謝謝大家的閱讀。

最新評論