这个属性官方文档语法:

实例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                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;*/         
            }    
        </style>
    </head>
    <body>
        <div class="a">padding</div>
        <div class="b">border</div>
        <div class="c">content</div>
        <div class="d">默认=border</div>
    </body>
</html>

效果如下:


Care豆儿
2 声望0 粉丝

CL