【CSS】background-clip屬性解決background問題。

引言：相信你點進來，必定對這個話題感興趣，那今天咱們就來研究一下半透明邊框！！！

先來舉一個例子：

div{
   background-color:#fff;
   border:40px solid rgba(255,255,255,.5);
   ...                        //此處省略不重要的代碼！！！
}

背景圖片是#fff白色，邊框顏色是rgba(255,255,255,.5) 白色半透明，可是爲何半透明邊框沒有顯示那？

其實，透明邊框代碼起做用了！！

那麼好，咱們來換一個顏色，這樣你就可以看出來！！！

div{
   background-color:red;
   border:40px solid rgba(255,255,255,.5);
   ...                        //此處省略不重要的代碼！！！
}

我把背景顏色換成了紅色

wow！！！邊框顏色變成了粉紅色 是否是很神奇！！！

是否是背景顏色從半透明白色邊框處透上來顯示 粉紅色 ？

答案是確定的。

默認狀況下，給Div設置背景顏色，背景會延伸到邊框的區域（在下層）。

因此上邊的現象很好解釋了！！

如何解決？

從 背景和邊框 （第三版） 開始，咱們能夠經過background-clip 屬性來調整這個bug給咱們帶來的不便！！

background-clip 的默認初始值是border-box

意味着背景會被border box（邊框的外延框）裁剪掉。

若是不但願背景入侵邊框的區域，將background-clip 屬性值設置爲padding-box 便可。

更改以後，以下圖：

div{
   background-color:red;
   border:40px solid rgba(255,255,255,.5);
   background-clip:padding-box;
   ...                        //此處省略不重要的代碼！！！
}

此時，半透明邊框清晰可見！！！