CSS background-clip修剪背景绘制区域
background-clip属性
clip单词有“修剪”的意思，因此，CSS中的background-clip属性似乎也可以理解为修剪背景的绘制区域，或者说是渲染区域，结合下方的实例来理解可以更具象化一些。
属性值
| 值 | 描述 |
|---|---|
| border-box | 背景被修剪到边框 |
| padding-box | 背景被修剪到内边距 |
| content-box | 背景被修剪到内容框 |
background-clip实例代码，及在线编辑器
<div id='e1' class='e'></div>
<div id='e2' class='e'>文本内容</div>
<style>
.e{width:50%;height:50%;background-image:url("../../static/img/test.jpg");background-repeat:no-repeat;border:1px solid green;padding:10%;}
#e1{background-clip:border-box;}
#e2{background-clip:content-box;}
</style>提示
上例中的蓝色是图片，即当前实例中被background-clip修剪的图片，不是背景色。至于背景色会不会被修剪，可以在编辑器当中在线编辑修改，然后在线运行，看看效果如何。