zoukankan      html  css  js  c++  java
  • background-clip--背景是否填充

     

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        div{
            /* border:dashed虚线 */
            background-color: black;
            border: dashed 15px green;
            padding: 30px;
            color: white;
            font-size: 30px;
            font-weight: bold;
            background-image: url("1.png");
            /* 背景不重复 */
            background-repeat: no-repeat;
        }
        .div1{
            /* 背景充满(包含边框和内边距) */
            background-clip: border-box;
            /* 图片从左上角边框绘制 */
            background-origin: border-box;
        }
        .div2{
            /* 不包含边框,包含内边距 */
            margin-top: 40px;
            background-clip: padding-box;
            /* 图片从左上角内边距开始绘制 */
            background-origin: padding-box;
        }
        .div3{
            /* 不包含边框和内边距 */
            margin-top: 40px;
            background-clip: content-box;
            /*  */
            background-origin: content-box;
        }
    </style>
    <body>
        <div class="div1">实例一</div>
        <div class="div2">实例二</div>
        <div class="div3">实例三</div>
    </body>
    </html>
    

      

  • 相关阅读:
    ch_6802 車的放置
    ch_POJ2182 Lost Cows
    ch_4201 楼兰图腾
    luogu_P3368【模板】树状数组 2
    门面
    建造者
    模板方法
    状态
    抽象工厂
    工厂方法
  • 原文地址:https://www.cnblogs.com/fdxjava/p/13080995.html
Copyright © 2011-2022 走看看