当我们在实现透明边框的时候,会遇到一些问题。在阐述这些问题之前,首先看看什么是透明边框,总的来说,就如下图所示。
透明边框.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);