當(dāng)我們在實現(xiàn)透明邊框的時候，會遇到一些問題盹沈。在闡述這些問題之前龄章，首先看看什么是透明邊框，總的來說，就如下圖所示做裙。
透明邊框.png
眾所周知的是岗憋，一旦給一個元素設(shè)置了背景之后，那么這個背景所包含的區(qū)域是 content + padding + border锚贱。
按照一般的思路仔戈，我們要設(shè)置一個透明邊框，首先會用到以下代碼：
background: #FFF;
border: 10px solid rgba(255, 255, 255, .5);
如果是這么設(shè)置拧廊，不出意外我們會看到以下結(jié)果监徘。
透明邊框2.png
看上去我們像是沒有設(shè)置這個邊框，實際上這個邊框是存在的卦绣，由于我們的邊框設(shè)置的是透明的白色耐量，而這個元素的背景也是白色，所以看上去就只有白色滤港，所謂的透明邊框也就不存在了廊蜒。不過這只是特例情況，如果元素的背景不是白色溅漾，而是其它顏色山叮，那么我們是可以看到這個邊框的，不過這個時候就不再是透明邊框添履，而是背景色+透明色的結(jié)合色屁倔。就比如設(shè)置以下代碼。
background-color: orange;
border: 10px solid rgba(255, 255, 255, .5);
效果如下：
透明邊框3.png
再次回到一開始以白色為背景的情況暮胧，為什么會出現(xiàn)透明邊框消失呢锐借？原因就是白色+透明色還是白色，那么我們能不能讓背景色的渲染范圍由 content+padding+border 變成 content+padding 呢往衷？
解決這個問題的突破口是 background-clip 屬性钞翔，它就是用來設(shè)置元素背景渲染范圍的，有三個可選值分別是 content-box, padding-box, border-box席舍。詳情可以查看 CSS3 Background Clip
所以布轿，為了得到一個令人滿意的透明邊框，我們的代碼是
background-clip: padding-box;
background-color: #FFF;
border: 10px solid rgba(255, 255, 255, .5);
