<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
/* border:dashed虚线 */
background-color: black;
border: dashed 15px green;
padding: 30px;
color: white;
font-size: 30px;
font-weight: bold;
background-image: url("1.png");
/* 背景不重复 */
background-repeat: no-repeat;
}
.div1{
/* 背景充满（包含边框和内边距） */
background-clip: border-box;
/* 图片从左上角边框绘制 */
background-origin: border-box;
}
.div2{
/* 不包含边框，包含内边距 */
margin-top: 40px;
background-clip: padding-box;
/* 图片从左上角内边距开始绘制 */
background-origin: padding-box;
}
.div3{
/* 不包含边框和内边距 */
margin-top: 40px;
background-clip: content-box;
/* */
background-origin: content-box;
}
</style>
<body>
<div class="div1">实例一</div>
<div class="div2">实例二</div>
<div class="div3">实例三</div>
</body>
</html>
