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);

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,103评论 1 91
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,030评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,118评论 0 11
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    圆圆和方方阅读 729评论 0 7
  • 1.半透明边框 问题: 如果我们要为一个容器设置红色背景和一道黑色半透明边框,我们可能会这样写: 但是效果却是这样...
    FlyingWWS阅读 3,341评论 4 21