《css揭秘》之背景與邊框

這本書是魔法哥的譯著，也是買了有很長時間了，現在開始慢慢閱讀，確實比較新穎，包含了很多css方面的小tips。來一點點的做個總結。

關於半透明我們可能會想到使用rgba,opacity等等，對於背景提供回退方案還是比較好做的，要麼利用一張單畫素半透明，要麼回退到實色。但是對於其他屬性，比如邊框我們就只能回退到實色了。甚至到ie都要利用濾鏡了。好了言歸正傳。

我們寫了如下**：

<
div 
class
="container"
>
<
div 
class
="test1"
>wretyui
div>
div>

.container.test1

來開啟瀏覽器一看，白茫茫的一片，說好的半透明的白色邊框去哪了。

這裡就要知到背景的渲染機制了，在預設情況下，背景顏色也會蔓延到邊框上。來段**證明一下。

看見了沒，background蔓延到了border上，所以當我們上面那段**實質就是，白色的背景蔓延到了半透明的border上，導致border也變成了白色。我們為了不讓background背景色蔓延出去，我們就要利用background-clip這個屬性：增加如下**。

書本配套所有demo：

以往我們實現多重邊框，可能會通過div的巢狀來實現，這樣做很容易但是問題就是dom浪費，而且還有令人厭惡的居中問題，這裡又提供了其他的實現方案。

關於box-shadow我們已經不陌生了。但是用它來做邊框可能還很少見。

我們可以看到實現很容易，但是我們要知道通過box-shadow產生的「邊框」並不佔據真正的空間，不影響布局，所以我們如果需要佔據空間，那麼就需要通過內邊距或者外邊距模擬出需要佔據的空間。

再來看一下這幾個框的結構層次圖

.test2

有時候可能只需要兩層邊框，那麼我們可以利用outline描邊來做，而且利用outline可以實現虛線邊框效果，而像上面的box-shadow則不能辦到。

outline產生的「邊框」也是不會佔據空間的。正常情況下outline產生的「邊框」是在真正的邊框外面的。

當我們增加圓角時

我們發現outline產生的「邊框」並不會變成圓角。那麼通過box-shadow產生的邊框呢，是可以的。但是只有設定為outset的box-shadow會，設定為inset則不會產生圓角。

另外我們可以通過outline-offset來控制outline跟元素邊緣之間的位置。那麼我們就很容意實現縫邊效果。

outline參考資料：

當然多重邊框的實現還有其他方式：

直接看**吧

原理就是利用上面的outline產生的邊框是不隨border-radius而產生圓角的，而且由outline和box-shadow產生的邊框是不會佔據空間的。所以這裡是不能用border來代替box-shadow，因為border會佔據空間，outline會隨border擴張。