《css揭秘》學習（一）半透明邊框

標籤：span   運行   hit   content   ext   邊框   綠色   src   width   

1.知識點
HSLA顏色：HSLA(H,S,L,A)，取值：H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 – 360；S：Saturation(飽和度)。取值為：0.0% - 100.0%；L：Lightness(亮度)。取值為：0.0% - 100.0%；A：Alpha透明度。取值0~1之間。
2.html代碼：<div class="box1"></div>
3.css代碼：

body{
       background: red;
}
.box1{
        width: 30px;
        height: 30px;
        background: white;
        border: 10px solid hsla(0,0%,100%,.5);
}
4.運行效果： ，這樣看起來並沒有邊框，好像全部是content，但其實他是有邊框的， 。出現這樣的原因是什嗎？
原因：body 的背景沒有從半透明白色邊框處透上來， 而是在半透明白色邊框處透出了這個容器自己的純白實色背景， 這實際上得到的效果跟純白實色的邊框看起來完全一樣。預設狀態下，背景會延伸到邊框的地區下層。
5.解決辦法：在css代碼中加一句：background-clip: padding-box;
6.實現效果：
7.補充知識：background-clip 屬性規定背景的繪製地區。

border-box：背景被裁剪到邊框盒；
padding-box：背景被裁剪到內邊距框；

content-box：背景被裁剪到內容框。

《css揭秘》學習（一）半透明邊框