使用background-clip实现透明边框

你有没有在网页上见过具有透明边框的元素？我觉得正是因为Facebook使用了类似于Facebox的灯箱插件，才使得透明边框这一技术发扬光大。但我并不认为Facebook现在还觉得这种样式依旧很时髦，不过至少还是十分明晰整洁的。

你可能觉得实现这样的效果非常简单，只需要以下CSS代码：

---

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

---

但是如果这样写的话，元素的透明边框就会透出边框下面给该元素本身设置的背景。

在上面的截图中，边框已经用了RGBa设置为透明，但是边框却显示为不透明的灰色，这是因为该元素的白色背景透过边框显示了出来。

幸运的是，CSS3有个属性拯救了我们！这个属性就是background-clip，它正式用来指定在一个盒模型中，究竟哪一部分能够用来显示背景。它做的事儿正如它的名字一样：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, IE 9 */

 

-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, IE 9 */

 

-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, IE 9 */}

---

以下是图示：

我确信写道这里你已经明白透明边框如何设置了：如果我们将background-clip设置为padding-box的话，白色背景就会在边框处被裁掉，然后透明边框就可以透出该元素下面的内容了，这也正是我们想要的效果！

 

 

原文链接：http://article.yeeyan.org/view/211428/378443