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

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

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

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

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

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

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

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

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

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

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

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

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