CSS揭秘——透明边框

当我们在实现透明边框的时候，会遇到一些问题。在阐述这些问题之前，首先看看什么是透明边框，总的来说，就如下图所示。

透明边框.png

众所周知的是，一旦给一个元素设置了背景之后，那么这个背景所包含的区域是 content + padding + border。

按照一般的思路，我们要设置一个透明边框，首先会用到以下代码：

background: #FFF;
border: 10px solid rgba(255, 255, 255, .5);

如果是这么设置，不出意外我们会看到以下结果。

透明边框2.png

看上去我们像是没有设置这个边框，实际上这个边框是存在的，由于我们的边框设置的是透明的白色，而这个元素的背景也是白色，所以看上去就只有白色，所谓的透明边框也就不存在了。不过这只是特例情况，如果元素的背景不是白色，而是其它颜色，那么我们是可以看到这个边框的，不过这个时候就不再是透明边框，而是背景色+透明色的结合色。就比如设置以下代码。

background-color: orange;
border: 10px solid rgba(255, 255, 255, .5);

效果如下：

透明边框3.png

再次回到一开始以白色为背景的情况，为什么会出现透明边框消失呢？原因就是白色+透明色还是白色，那么我们能不能让背景色的渲染范围由 content+padding+border 变成 content+padding 呢？

解决这个问题的突破口是 background-clip 属性，它就是用来设置元素背景渲染范围的，有三个可选值分别是 content-box, padding-box, border-box。详情可以查看 CSS3 Background Clip

所以，为了得到一个令人满意的透明边框，我们的代码是

background-clip: padding-box;
background-color: #FFF;
border: 10px solid rgba(255, 255, 255, .5);