CSS3 background-clip属性

这个属性官方文档语法：
技术图片
实例代码：
<!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>
效果如下：
技术图片