css揭秘系列之半透明边框

1，半透明边框遇到的问题

在开发中，如果我们想要一个半透明的边框，想要让背景从边框透上来，我们第一想到的就是给边框设置rgab值，或者hsla。我们来试一下。

    body{        background-color:blue;    }    div{        width:40px;        height:40px;        border:10px solid rgba(200,50,100,0.1);    }

在chrom浏览器下测试的结果是这样的：

可以看到这和我们想要的结果并不一样，为什么会出现这种结果呢？我们继续测试。

2，边框和背景的工作原理

我们写下下面一段代码

    div{        width: 40px;        height: 40px;        background-color: green;        border:10px dotted black;    }

效果如下：

我们从测试的图中可以看到背景是默认延伸到边框下面的。所以我们得不到想要的结果。

3，background-clip

好在css3中为我们提供了background-clip属性：

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

background-clip的默认值是content-box。所以我们把background-clip属性设置为padding-box就可以达到我们想要的效果。

    body{        background-color:blue;    }    div{        width:40px;        height:40px;        border:10px solid rgba(150,150,100,0.3);        background-clip:padding-box;    }

效果如下：

可以看到达到了我们想要的效果。