开始之前,我们先来看下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边框。
若您觉得本篇文章对您有帮助,不介意的话可以点个关注!!