background |
您所在的位置:网站首页 › css3background-clip是干嘛用的 › background |
开始之前,我们先来看下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通过这段代码我们就得到了理想的结果 效果如下: 效果如下: 若您觉得本篇文章对您有帮助,不介意的话可以点个关注!! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |