半透明邊框與background-clip
在開始本章之前，我們要先簡單介紹CSS中的半透明顏色。自2009年後，網頁工作者們開始使用半透明顏色，如rgba()、hsla()。前者相信大家都很熟悉，不難理解其中將有四個參數，第四個參數則為透明度。而後者hsla()則是工業界的顏色標準，它包括了H：Hue(色調—— 用0或360表示紅色，120表示綠色，240表示藍色，也可取其他數值來確定其它顏色，一般取值範圍為0~360)；S：Saturation(飽和度——取值為：0% - 100%)；L：Lightness(亮度——取值為：0% - 100%）；Alpha（透明度——取值0~1之間，如“.5”）。從中我們可以明白，要實現顏色的透明化，需要通過修改rgba()/hsla()的第四個參數來達到目的。
自從半透明面世以來其廣受歡迎，但實際上大多數半透明顏色都運用在背景上；此外，由於考慮到瀏覽器我們需要在使用半透明顏色時需要做好回退方案。
到此，你也許已經初步了解了半透明顏色，那麽接下來，我將進入本文正題（學習此章需要學習者掌握盒模型知識）。
試想，如果當我們想要讓邊框實現半透明顏色同時透出背景色我們該如何做呢？
首先，讓我們試著為一個<div>元素設置半透明邊框，如下：
<body> <!--為<div>元素設置半透明邊框--> <div style="border:10px dashed rgba(225,225,100,.5);width:600px"> <p>學而時習之</p> </div> </body>
其效果如下（圖一）：
如上圖，我們已經設置了透明邊框，按理說，當邊框有一定的透明度，其背景色也將會透過邊框呈現出來，那麽我們可以試著給這個<div>元素設置其背景顏色，如下：
<body> <!--為<div>元素設置半透明邊框--> <div style="border:10px dashed rgba(225,225,100,.5); width:600px; background-color:red;"> <p>學而時習之</p> </div> </body>
試著運行這段代碼，你是否也得到了如下結果（圖二）？
嗯，邊框已經透出了背景色，由於我們在設置半透明邊框時也為其自身設置了顏色，參照圖一，這時邊框就像一個自帶顏色的透明玻璃框，它蓋在了“背景幕布”上面，最後透出了與“幕布”融合的顏色（有種調色的感覺呢）。但是，如果“背景幕布”下還有一層更大的“幕布”，這塊帶有顏色的透明玻璃框又會怎麽做呢？
<body style="background-color:pink"> <!--為<div>元素設置半透明邊框--> <div style="border:10px dashed rgba(225,225,100,.5); width:600px; background-color:red;"> <p>學而時習之</p> </div> </body>
當然你也可以試著用<body>標簽的背景圖片來進行試驗，上述代碼我們則得到了以下效果（圖三）： 
嗯，看來我們可以得出我們的第一個結論了：<div>元素的透明邊框透出的是該<div>自身的背景色，也就是說，當我們設置border為透明後，它將會透出其所屬元素的背景色。
讓我們回顧圖二及其代碼（如下），會發現我們將border線型設為了dashed，但此時<div>的背景色延伸到了哪裏呢？
圖二及其代碼：
<body> <!--為<div>元素設置半透明邊框--> <div style="border:10px dashed rgba(225,225,100,.5); width:600px; background-color:red;"> <p>學而時習之</p> </div> </body>
沒有錯，你會發現，<div>的背景色延伸到了border處。但是，這是為什麽呢？
如果你已經學習過盒模型了，那麽我想你肯定會有所思緒的。上述問題，說白了就是希望背景色“乖乖待在”padding以內的區域的問題。那麽要如何實現呢？看看我們這章的標題——半透明邊框與background-clip，對的，就是利用background-clip屬性。在我們的試驗過程中，我們沒有說明background-clip屬性的屬性值，但此時默認地，背景色延伸到了border處；但是如果我們設置一下它的屬性值，又會怎樣呢？
<body style="background-color:pink;"> <!--為<div>元素設置半透明邊框--> <div style="border:10px dashed rgba(225,225,100,.5); width:600px;background-color:red;background-clip:padding-box;"> <p>學而時習之</p> </div> </body>
we did it !!!!!是的，當我們將background-clip屬性的值設為padding-box後，我們解決了“如何讓背景色乖乖待在padding以內的區域”的問題。結合前文，我們知道在默認情況（不設置background-clip屬性）下，背景延伸會延伸到border處，這就說明實際上此時background-clip屬性有一個默認的值，沒錯，就是“border-box”。由此，我們可以得出我們的第二個結論：background-clip屬性說明背景延伸至何處，如果不設置這一屬性那麽默認情況下其屬性值為“border-box”，此時背景色將延伸至border邊緣；但是當其屬性值為“padding-box”時，背景色將延伸至padding區邊緣。
通過設置background-clip為padding-box，我們可以令元素自身的背景色只延伸至padding區邊緣，從而令透明的border透出更底下的顏色或者圖片，這就是我們想要使用半透明邊框的真正目的，也就是這樣的效果：
上圖效果的代碼如下：
<body style="background-image:url(‘mm93.png‘);"> <!--為<div>元素設置半透明邊框--> <div style="border:40px solid rgba(225,225,100,.5); width:200px;height:200px;margin:60px;background-color:red;background-clip:padding-box;"> <p>學而時習之</p> </div> </body>
以下就是我們今天解決的三大問題：
半透明邊框與background-clip