《css揭秘》學習（一）半透明邊框
阿新 • • 發佈：2017-08-30
sla class 代碼 原因 什麽 alt sat spa 運行 
。出現這樣的原因是什麽？
原因：body 的背景沒有從半透明白色邊框處透上來， 而是在半透明白色邊框處透出了這個容器自己的純白實色背景， 這實際上得到的效果跟純白實色的邊框看起來完全一樣。默認狀態下，背景會延伸到邊框的區域下層。
5.解決辦法：在css代碼中加一句：background-clip: padding-box;
6.實現效果：
7.補充知識：background-clip 屬性規定背景的繪制區域。
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.運行效果： 
。出現這樣的原因是什麽？原因：body 的背景沒有從半透明白色邊框處透上來， 而是在半透明白色邊框處透出了這個容器自己的純白實色背景， 這實際上得到的效果跟純白實色的邊框看起來完全一樣。默認狀態下，背景會延伸到邊框的區域下層。
5.解決辦法：在css代碼中加一句：background-clip: padding-box;
6.實現效果：
7.補充知識：background-clip 屬性規定背景的繪制區域。
border-box：背景被裁剪到邊框盒；
padding-box：背景被裁剪到內邊距框；
content-box：背景被裁剪到內容框。
《css揭秘》學習（一）半透明邊框