css之background-clip属性

1 作用：控制背景的渲染区域

2 background-clip原理是将背景渲染的区域控制和裁剪背景大小,在裁剪范围外的区域则不会被显示。

取值说明： 1.border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉 2.padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉 3.content-box：背景从content区域向外裁剪，超过内容区域的背景将被裁剪掉。

 

 

 

 效果是

 

 接下来是background-clip和background-origin的区别，因为这两个属性之间有些相同点。

background-origin

1.设置元素背景图片的原始起始位置,即可以选择背景图片是从内容区域开始显示，还是内边距，还是边框。

2.取值： padding-box、border-box、content-box

3.需要注意的是，如果背景不是no-repeat，这个属性无效