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

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**：

3. css**：

body

.box1

4.執行效果：

原因：body 的背景沒有從半透明白色邊框處透上來， 而是在半透明白色邊框處透出了這個容器自己的純白實色背景， 這實際上得到的效果跟純白實色的邊框看起來完全一樣。預設狀態下，背景會延伸到邊框的區域下層。

5.解決辦法：在css**中加一句：background-clip: padding-box;

6.實現效果：

7.補充知識：background-clip 屬性規定背景的繪製區域。

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

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

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

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

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...

《CSS揭秘》半透明邊框

效果展示 展示 doctype html en utf 8 viewport content width device width,initial scale 1.0 半透明邊框 title body div style head 我有乙個半透明的邊框呦 div body html 預設情況下，背景...

CSS揭秘 半透明邊框

技巧 實現乙個半透明的邊框 預備知識background clip background clip 設定元素背景是否延伸到邊框下面，如果沒有設定背景顏色或者，那麼這個屬性只有在邊框設定為透明或者半透明時才能看到視覺效果。否則這個屬性造成的樣式變化會被元素邊框所覆蓋。預設值為 border box 沒...