技巧1：半透明边框

前面的话

从今天起，每天更新一个css技巧，每个技巧都是来自《css揭秘》。

半透明边框

现在我们要得到一个div，它的背景颜色是白色，边框10px实线，并且是半透明的。该如何实现呢？

当我们看到半透明边框时，首先想到应该就是将border直接使用半透明颜色rgba或者hsla。比如：

        border: 10px solid hsla(0,0%,100%,.5);
        background: white;

得到结果：

从图中看出，这样做并没有得到半透明边框。

为什么会这样呢？

实际上，background设置颜色默认是从border开始绘制，这里设置背景颜色为白色后，这个白色会遮住border设置的半透明色，所以现实中看不到半透明边框的效果。

如何得到半透明边框呢？

这里我们就需要用到background-clip属性，它规定了背景的绘制区域。

语法：

 background-clip: border-box|padding-box|content-box;

值	描述
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

有了这个属性就简单了，既然上面的代码中，白色的背景挡住了border的半透明颜色，现在利用 background-clip属性，将背景颜色的绘制区域改为padding-box,从内边距（padding）开始绘制，这个问题就解决了。

完整demo

css:

            body {
                background: url('http://csssecrets.io/images/stone-art.jpg');
            }
            div {
                max-width: 20em;
                padding: 2em;
                margin: 2em auto 0;
                font: 100%/ 1.5 sans-serif;
    
                border: 10px solid hsla(0,0%,100%,.5);
                background: white;
    
                background-clip: padding-box;
    
            }

html:

         <div>
                Can I haz semi-transparent borders?
                Pretty please?
            </div>

效果展示：