css的background-clip的border-box,padding-box,content-box

background-clip有三个属性默认值为border-box

padding-box:将图片裁剪到内边距盒子以内

content-box:将图片位于内边距及其之外的部分裁剪掉

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-position: center;
                border: 10px solid rgba(220,220,160,.5);
                background-image: url(./img/cat.jpg);
                padding: 20px;
                float: left;
            }
            .a1{
                background-clip: border-box;
            }
            .a2{
                background-clip: padding-box;
            }
            .a3{
                background-clip: content-box;
            }
            footer{
                clear:left;
            }
            footer > span:nth-of-type(1){
                margin-left: 80px;
            }
            footer > span:nth-of-type(2){
                color: red;
                margin-left: 180px;
            }
            footer > span:nth-of-type(3){
                margin-left: 150px;
            }
        </style>
    </head>
    <body>
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3"></div>
        <footer>
            <span>border-box</span>
            <span>padding-box</span>
            <span>content-box</span>
        </footer>
        
    </body>
</html>

 

posted @ 2020-07-19 07:00  放学别跑啊  阅读(544)  评论(0)  编辑  收藏  举报