background-clip--背景是否填充

<!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>