相信大家以前都是用過css的半透明顏色，比如rgba()和hsla()。但在一些屬性（比如邊框）中使用半透明顏色並沒有想象中那麼容易。我們接下來會看的：
假設我們想給乙個容器設定乙個白色的背景和一道半透明的白色邊框，body的背景會從半透明的邊框透過來。我們最開始的嘗試可能是醬子的：
1結果如圖所示：.test
這個結果可能會令你摸不到頭腦。我們的邊框去哪兒了呢？而且我們連使用半透明顏色都不能實現半透明邊框，那我們還有什麼辦法呢？
解決方案：
儘管看起來並不像那麼回事兒，但我們的邊框仍舊存在。預設的情況下，背景會延伸到邊框所在的區域下層。
我們可以通過background-clip屬性來調整上述預設行為所帶來的不便。這個屬性的初始值為border-box，意味著背景會被元素的border box（邊框的外延框）裁切掉。如果不希望背景侵入邊框所在的範圍，我們要做的就是把它的值設為padding-box,這樣瀏覽器就會用內邊距的外延來把背景裁切掉。
1可以看到完美的結果，如下：.test
《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 沒...
半透明邊框與多重邊框的實現
以下技巧均源自於lea verou所著 css secrets 按照常規的思維，我們在新增半透明的邊框時無非是將邊框顏色設定乙個透明度，如下 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title title title 6...