先附上**：
html**：
lang="en">
charset="utf-8">
1、半透明邊框title>
rel="stylesheet"
href="1.css"/>
head>
id="div1">111div>
body>
html>css**：
@charset
"utf-8"
;#div1
body
可以看到，div的邊框是透明的
說明
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之間
———- 通常，在給乙個元素加透明邊框的時候，我們首先想到的是應該這麼做： （給乙個紅色的方框加上透明邊框）
border: 10px solid hsla(0,0%,100%,0.5);
background: red;
可以看到，透明的邊框並不是相對於黑色的背景透明的，而是相對於紅色的方框。
如果我們把邊框設定成虛線來顯示，就能更加直觀的看到這個效果：
預設狀態下，背景會延伸到邊框的區域下層。
所以如果我們能將紅色的背景裁剪到邊框之內，就可以解決這個問題。
定義和用法
background-clip 屬性規定背景的繪製區域。
取值值描述
border-box
背景被裁剪到邊框盒。
padding-box
背景被裁剪到內邊距框。
content-box
背景被裁剪到內容框。
所以當我們給**加上background-clip: padding-box;後，就可以把效果完美的顯示出來了。
《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 沒...
《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...