html css background,CSS3 background-clip属性

这个属性官方文档语法：

实例代码：

*{

margin: 10px;

}

.a{

float: left;

height: 200px;width: 200px;

border: 10px dashed royalblue;

padding: 20px;

background-color: #F08080;

/*background: url(img/HBuilder.png) no-repeat;*/

background-clip:padding-box;

}

.b{

float: left;

height: 200px;width: 200px;

border: 10px dashed royalblue;

padding: 20px;

background-color: #F08080;

/*background: url(img/HBuilder.png) no-repeat;*/

background-clip:border-box;

}

.c{

float: left;

height: 200px;width: 200px;

border: 10px dashed royalblue;

padding: 20px;

background-color: #F08080;

/*background: url(img/HBuilder.png) no-repeat;*/

background-clip:content-box;

}

.d{

float: left;

height: 200px;width: 200px;

border: 10px dashed royalblue;

padding: 20px;

background-color: #F08080;

/*background: url(img/HBuilder.png) no-repeat;*/

}

padding

border

content

默认=border

效果如下：

标签：CSS3,clip,padding,background,10px,border,200px

来源： https://www.cnblogs.com/webshare2020/p/13095353.html