原文链接:http://css-tricks.com/transparent-borders-with-background-clip
@李松峰 编译

各位,你见过种边框透明的效果吗?对,这就是Web 2.0网站上常见的“亮盒”效果。那些透明的边框都是半透明PNG做的。

enter image description here

如今有了支持RGBa的浏览器,或许你觉得这个效果只要两行CSS代码就可以实现:

#lightbox {
   background: white;
   border: 20px solid rgba(0,0,0,0.3);
}

但结果呢,你把元素边框设成了透明,元素自身的背景(white)却透过了边框。喏,就成这样了:

enter image description here

出乎意料吧?听我解释,你用RGBa把边框变成了透明的,于是原本被边框挡住的白色背景就显示出来了。

震颤登场:background-clip

别急,CSS3有一个新属性可以解决这个问题!这个属性大名鼎鼎,掷地有声……别介,还是从地上捡起来吧,它叫background-clip,是专门用来指定盒模型中哪一部分显示背景的。别告诉我你不知道盒模型中用于显示背景的范围可以是内容区、内边距区和边框区,这三个区域一个比一个大。这个属性只有三个值,现在要用的话得加上厂商前缀。为了方便,我把三个值都写在一块了,实际上当然只能用一个:

#lightbox {

    -moz-background-clip: border;     /* Firefox 3.6? */
    -webkit-background-clip: border;  /* Safari 4? Chrome 6? */
    background-clip: border-box;      /* Firefox 4、Safari 5、Opera 10、IE9 */

    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;     /* Firefox 4、Safari 5、Opera 10、IE9 */

    -moz-background-clip: content;     /* Firefox 3.6 */
    -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
    background-clip: content-box;      /* Firefox 4、Safari 5、Opera 10、IE9 */

}

有代码,再有图,你就彻底明白了。翠花儿,上示意图。

enter image description here

怎么还有英文?就当沙拉吧,对了,括号里的defualt是默认值啊。看图,看图,看图……噢,明白啦:只要把background-clip设定为padding-box,白色背景就不会进入边框区域,而底层的文字就能透过边框被看到,从而实现我们想要的效果了。

enter image description here

等等,菜还没上齐呢。

相关属性:background-origin

如果你只想做个“亮盒”,元素背景多半会是实色。此时,当然不关background-origin属性什么事儿。可是,假如元素背景中有一张图片,那设定背景图片的起点就全靠它了。

这好像跟background-clip无关哪?当然有关。如果把background-clip设定为padding-box(像前面那样),而background-origin仍然是默认的border-box,那图片的外围就会有一圈被裁掉。有时候,这恐怕不是你想要的。

对了,光顾说话儿了,上菜上菜。

enter image description here

怎么样,再看几个例子。图中的红字是background-origin的三个不同的值。

enter image description here

确保浏览器兼容性

这两个属性能在Safari 5、Chrome 7、Firefox 3.6+、Opera 10、IE9中使用,都测试过了。在非IE浏览器中,再低点的版本没准儿都可以,但未经测试噢~~

如果你想兼容所有浏览器,最保险的做法还是“双DIV”法。

<div id="lightbox">
   /* 设定透明PNG图片背景,通过内边距把内部盒子向里推 */

   <div id="lightbox-inside">
      /* 设定白色背景 */
   </div>

</div>

“双DIV”法还有一个优点,就是能够保证圆角边框到哪儿都是真正的圆角。说到实现圆角效果,使用background-clip方法唯一令人惋惜的,就是边框的外角能变成圆形,而背景这边始终是直角,就像下面这样。

enter image description here

只可惜,没有一个属性叫background-radius,要有的话,以下代码就能解决问题:

#lightbox
   border-radius: 16px;
   padding: 8px;

   /* 没有这个属性啊,这是写着玩的,假想的 */
   background-radius: 8px;
}

灵异的现象

在Safari 5中,边框宽20像素没问题,但30像素的时候,就会出现该死的小方块。

enter image description here

在Chrome中,边框宽度在20像素以下的时候,都会出现可恶的对角线。

enter image description here

而边框宽度一超过20像素,干脆整个角都变黑了。

enter image description here

如果不设定border-radius,那无论边框多宽,四角始终都是深色的。

enter image description here

(正文完)

各路英雄豪杰,如果你有什么真知灼见,欢迎留言,吐槽。