CSS3 Background-clip

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

上一节在《CSS3 background-size》详细的介绍了CSS3background新增属性之一,今天和大家一起来学习CSS3中有关于Background的第二新属性Background-clip。CSS3中的Background-clip属性,其主要是用来确定背景的裁剪区域,换句话说,就是如何控制元素背景显示区域。首先来看其语法:

  background-clip : border-box || padding-box || content-box

取值说明:

1、border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉;

2、padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉;

3、context-box:背景从content区域向外裁剪,超过context区域的背景将被裁剪掉;

形象一点的可以参照下图的layout所示:

不知道大家没有深入的去了解Box Model中background部分,background在Box Model中,他是布满整个元素的Box区域的,并不是从padding内部开始,只不过边框部分遮住了部分background,但有一点需要注意,background-color是从元素的边框左上角起到右下角止,而background-image却不一样,他是从padding边缘的左上角起而到border的右下角边缘止,如果大家对上面那句话不太好理解的话,我们一起来看一个简单的Box Model加上边框和背景色,背景图片的示意图:

   <div class="demo"></div>

为了更好的看出问题,我们给上面的demo元素加上一个样式:

  .demo {
     width: 220px;
     height: 115px;
     padding: 20px;
     border: 20px dashed rgba(255,0,0,0.8);
     background: green url("../images/box-shadow-img.png") no-repeat;
     font-size: 16px;
     font-weight: bold;
     color: red;
   }

下面的效果就更清晰的说明了上面那句话:

但如何能让他们在统一的位置显示呢?那就是今天所要介绍的background-clip,这个属性就会让背景色和背景图片统一在相同的位置,前面也简单说过,background-clip会根据不同的属性值进行裁剪多了的背景部分。那么background-clip有哪些浏览器能支持呢?详细的先来看下面图:

background-clip和background-size一样,在各种浏览器内核下,都具有自己的私有前缀,但background-clip在Mozilla下分得特别的细,那么先来看看background-clip在Mozilla下的语法规则:Mozilla内核(如Firefox)在3.6版本以下是不支持border-box;padding-box;content-box的语法规则,其语法如下:

1、Firefox3.6版本以下(包含3.6版本):

  -moz-background-clip: border || padding   /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/content/css3-background-clip

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部