zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    开课博客
    第二周学习进度
    django新建项目
    装饰器执行顺序问题
    Python3 图片转字符画
    python项目
    jdbc url写法(集群)
    gradle执行test任务报错
    java.lang.NoClassDefFoundError: org/junit/runner/manipulation/Filter
    django 403问题
  • 原文地址:https://www.cnblogs.com/MySweetheart/p/13338536.html
Copyright © 2011-2022 走看看