半透明边框

难题

demo 很简单，白色背景的 div 大小 50*50px，然后给他加了 10px 的半透明边框，我们希望背景图能够透过来，但是事与愿违，我们看到的白色矩形实际上是 70*70px。这是因为 半透明边框透出了这个容器自己的纯白色背景。

默认状态下，背景会延伸到边框的区域下层：

这里的理解我之前有个误区，并不是边框设置了带透明度的颜色，背景就会透上来，而是背景和边框用了一个颜色，然后边框又设置了透明度，背景才会透上来。比如上面的 demo 我边框换个颜色 rgba(125, 255, 255, .5)，就没有什么问题了（所以感觉实际生产中很少碰到这个问题）

解决方案

CSS3 起，我们可以通过设置 background-clip 属性来调整上述默认行为所带来的不便。这个属性的初始值是 border-box，意味着 背景会被元素的 border box（边框的外沿框）裁减掉。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为 padding-box。