半透明邊框與background-clip

假設我們想給一個 div 設定一層白色背景和一道半透明白色邊框， body的背景會從它的半透明邊框中透上來。

效果如圖：

我們一開始的嘗試可能是這樣的：

background: #fff;
border: 50px solid rgba(255, 255, 255, .5);

寫完後， 一看瀏覽器， 怎麼回事？我的邊框呢？

這個結果可能會令你摸不著頭腦， 要是使用半透明顏色都實現不了半透明邊框，那還有什麼辦法呢？

原因

儘管現在看起來像沒有邊框， 但那50px 的邊框是實際存在的。因為預設情況下，背景是會延伸到邊框的外沿，且處於邊框的下層。我們來驗證一下：

將邊框改變顏色，並設定為虛線

border: 50px dotted #000;

我們發現，白色背景位於黑色邊框的下面， 知道這個原因之後，我們就可以想到， 如果將背景裁切到邊框的內沿就可以實現我們要的效果了。

幸好 css 有這個屬性 background-clip

background-clip 設定元素的背景（背景圖片或顏色）是否延伸到邊框下面。

語法

background-clip: border-box 
background-clip: padding-box
background-clip: content-box
background-clip: inherit

值

border-box
    背景延伸到邊框外沿（但是在邊框之下）。
padding-box
    邊框下面沒有背景，即背景延伸到內邊距外沿。
content-box
    背景裁剪到內容區 (content-box) 外沿。
---摘自MDN

於是我們設定background-clip: padding-box; 即可,最後的程式碼:

border: 50px solid rgba(255,255,255, .5); 
background-color: #fff;
background-clip: padding-box;