CSS3 background-clip属性

这个属性官方文档语法:
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>

效果如下:
CSS3 background-clip属性

上一篇:怎么使用html+css实现轮播图效果(代码分享)


下一篇:面试高频题实现:左右宽度固定宽度,中间自适应的三栏布局