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>
    

      

  • 相关阅读:
    java 数组
    数组(二)
    JVM内存分配策略
    JVM垃圾收集算法
    LINUX 查看硬件配置命令
    遗传算法
    svn简单使用
    Several concepts in Data Mining
    JVM判断对象存活的算法
    JVM运行时数据区
  • 原文地址:https://www.cnblogs.com/fdxjava/p/13080995.html
Copyright © 2011-2022 走看看