background-clip属性详解

开始之前，我们先来看下W3C school中的定义

background-clip 属性规定背景的绘制区域
默认值为border-box，可选值为padding-box和content-box

在上正菜之前我们首先提一个需求：给一个容器设置一层白色背景和一道半透明白色边框，body
的背景会从它的半透明边框透上来（理想效果如图）。

我们最开始的尝试可能是这样的(设置宽高及定位相关代码省略)：

    background: white;
           
    border: 1em solid rgba(255,255,255,0.5);

除非你对背景和边框的工作原理有着非常好的理解，否则这个结果（参见下图）可能会令你产生疑惑。

我们的边框去哪儿了啊？而且如果我们连使用半透明颜色都不能实现半透明边框，那我们还有什么办法？！
揭秘：
虽然在上图中边框看起来不存在，但实际上还是有的。这个问题产生的原因是：在默认情况下，背景会延伸到边框所在的区域下层。这一点很容易验证，给一个有背景的元素应用一个比较明显的非透明颜色的虚线边框，就可以看出来。

在上面的例子中，这个特性完全打破了我们的设计意图。我们所做的事情并没有让 body 的背景从半透明白色边框处透上来，而是在半透明白色边框处透出了这个容器自己的纯白实色背景，这实际上得到的效果跟纯白实色的边框看起来完全一样。

在 CSS3之前，这就是背景的工作原理。我们只能接受它并且向前看。但在CSS3中我们可以通过 background-clip 属性来调整上述默认行为所带来的不便。这个属性的初始值是 border-box，意味着背景会被元素的 border box（边框的外沿框）裁切掉。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为 padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉。

    background: white;
           
    border: 1em solid rgba(255,255,255,0.5);
    
	background-clip: padding-box

通过这段代码我们就得到了理想的结果

若我们使用content-box效果会是什么样的呢

    background: white;
           
    border: 1em solid rgba(255,255,255,0.5);
    
	background-clip: content-box

效果如下：

为什么效果和padding-box一样呢，这是因为上面的代码中还未设置padding属性，所以content-box表现的效果就和padding-box一样，当我们设置padding后效果会是什么样的呢？

    background: white;
           
    border: 1em solid rgba(255,255,255,0.5);
    
	background-clip: content-box;

	padding: .5em;

	box-sizing: border-box; //  使设置padding后的总宽高不变

效果如下：

由于设置了background-clip: content-box所以只有在这个div的content部分才显示设置好的背景色，也就是白色，而content周围的红边部分则是设置的padding，由于padding本身没有背景色，所以显示的就是其父元素中的背景色，也就是红色。而再外一层的透明边框就是之前设置的1em边框。

若您觉得本篇文章对您有帮助，不介意的话可以点个关注！！