background-clip属性：背景的绘制区域

HTML：

<div class="div1">示例1</div>
<div class="div2">示例2</div>
<div class="div3">示例3</div>

css：

div{background-color: black;border:dashed 15px green; padding:30px; color:white; font-size:30px; font-weight: bold; }

.div1{

//背景：给整个盒模型区域添加背景

background-clip: border-box;

}

.div2{

margin-top: 40px;

//背景：给内容及padding添加

background-clip: padding-box;

}

.div3{

margin-top: 40px;

//背景：只给内容添加

background-clip: content-box;

}

 效果图：