> 原文出處：http://www.w3cplus.com/css3/css-secrets/translucent-borders.html ## 問題 現在，你對 CSS 中的半透明顏色可能已經有了基礎的了解，比如?**`rgba()`**?和?**`hsla()`**。從 2009 年開始，雖然在開發設計中使用它們需要付出一些代價，比如提供降級措施、使用IE濾鏡，但是總得來說它是一個巨大的變革。不過在實際中，它們主要被用于背景，有這么幾點原因： * 早期的開發者沒有意識到這些新屬性就是類似?**#ff0066**?和?**orange**?的色彩，而是將它們看作是圖片，所以僅用在了背景上。 * 為背景提供降級方案比其他屬性更簡單。比如，可以直接使用單像素的半透明圖片替代半透明背景。對于其他屬性，則只能使用不透明顏色。 * 在其他屬性上使用半透明顏色，比如邊框，并不簡單，我們將在下文介紹原因。  *圖注：24ways.org 是第一個在設計中使用半透明顏色的網站，那時還是 2008 年，那時它們網站的特點就是使用了大量的背景（由 Tim Van Damme 設計）* 假設我們想要美化一個容器，讓它擁有一個白色的和半透明白色的邊框——這個半透明邊框可以讓它后面的內容顯示出來。我們要做的第一步就像是下面這樣： ~~~ border: 10px solid hsla(0,0%,100%,.5); background: white; ~~~ 除非你非常了解`background`和`border`這兩個屬性的工作原理，否則上面代碼得到的結果會讓你感到非常的困惑。邊框哪里去了呢？是不是不能為邊框添加半透明顏色呢？到底該怎么做？  *圖注：第一次嘗試實現半透明邊框* ## 解決方案 雖然看起來的效果和預期有所差異，其實邊框是存在的。實際上，背景色默認會擴展到邊框上，這一點可以通過給邊框添加虛線觀察到。如下圖所示：  *圖注：背景默認會擴展到邊框區域下方* 雖然這和你使用不透明的實線邊框是一樣的，但在這個示例中，它完全推翻了我們的預期。結果看起來是純白色的邊框，實際上是一個半透明白色的邊框，然后在它下面是白色的背景色。 在 CSS 2.1 中，這就是?`background`?的工作原理。我們不得不接受和使用它。值得慶幸的是，在[Backgrounds & Borders Level 3](http://w3.org/TR/css3-background)中，我們已經可以使用`background-clip`?屬性來調整這一效果。`background-clip`的默認值為`border-box`，也就是說，背景色會填充到容器邊框以及邊框以內的地方，所以我們只需要將其修改為`padding-box`（讓背景色在容器的內邊距以及內邊距以內填充）就可以實現所需要的效果了： ~~~ border: 10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box; ~~~ 更完善的效果如下圖所示：  *圖注：修正了?`background-clip`?的問題* ## 總結 雖然在`border-color`上能運用[`rgba()`、`hsla()`](http://www.w3cplus.com/css3/playing-with-css3-colors)設置邊框為半透明或完全透明，如果元素設置了背景顏色或背景圖片的時候，會直接影響邊框的透明顏色效果。特別是，要看到邊框底下的內容時。造成這個現象是由于背景圖片會延伸到邊框底部。要解決這一問題，可以通過CSS3的[`background-clip`](http://www.w3cplus.com/content/css3-background-clip)來修正。[@Chris Coyier](https://css-tricks.com/author/chriscoyier/)早在2010年的時候就在[CSS-Tricks](https://css-tricks.com/)詳細介紹過[這方面的知識](https://css-tricks.com/transparent-borders-with-background-clip/)。