CSS揭秘——透明边框

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

透明边框.png

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

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

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

透明边框2.png

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

效果如下:

透明边框3.png

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

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

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

Add a Comment

电子邮件地址不会被公开。 必填项已用*标注