技巧：實現乙個半透明的邊框預備知識background-clip
background-clip 設定元素背景是否延伸到邊框下面，如果沒有設定背景顏色或者，那麼這個屬性只有在邊框設定為透明或者半透明時才能看到視覺效果。否則這個屬性造成的樣式變化會被元素邊框所覆蓋。
預設值為 border-box 沒有繼承性，也不適用於css動畫。取值範圍 border-box; padding-box; content-box;
瀏覽器支援預設情況下，乙個容器的背景會延伸到邊框所在的區域下層。通過background-clip屬性可以調整背景的侵入範圍。android4.3及以下，不支援background-size
在safari瀏覽器上支援 -webkit-background-clip: text
border: 10px hsla(0,0%,100%,.5);實現乙個半透明邊框background: #fff;
background-clip: padding-box;
play.csssecrets.io/translucent-borders
《CSS揭秘》半透明邊框
效果展示 展示 doctype html en utf 8 viewport content width device width,initial scale 1.0 半透明邊框 title body div style head 我有乙個半透明的邊框呦 div body html 預設情況下，背景...
CSS揭秘 案例1 半透明邊框
先附上 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的邊框是透明的 說明...
《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...