实例
指定绘图区的背景：
div { background-color:yellow; background-clip:content-box; }
语法
background-clip: border-box|padding-box|content-box;
| 值 | 说明 |
|---|---|
| border-box | 默认值。背景绘制在边框方框内（剪切成边框方框）。 |
| padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 |
| content-box | 背景绘制在内容方框内（剪切成内容方框）。 |
实例：
div2和div3虽然都是border-clip但是因为div3有no-repeat属性 所以图片没有沾满div
content-box表示元素的背景保留在前景内容中（文字），和其形状大小相同,目前仅支持chrome浏览器
htmlcss
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
<div class="div5">
wenzi
</div> div{
width: 140px;
height: 140px;
padding:5px;
margin: 5px;
}
.div1{
border: 10px dotted black;
background: yellow;
background-clip: border-box;
}
.div2{
border: 10px dotted black;
background-clip: border-box;
background: url('http://jiuaibuni.top/wp-content/uploads/2020/12/77-150x150.png');
}
.div3{
border: 10px dotted black;
background-clip: border-box;
background: url('http://jiuaibuni.top/wp-content/uploads/2020/12/77-150x150.png') no-repeat;
}
.div4{
border: 10px dotted black;
background: url('http://jiuaibuni.top/wp-content/uploads/2020/12/77-150x150.png');
background-clip: padding-box;
}
.div5{
border: 10px dotted black;
background: yellow;
background-clip: content-box;
background: url('http://jiuaibuni.top/wp-content/uploads/2020/12/77-150x150.png');
}
Comments | NOTHING