zoukankan      html  css  js  c++  java
  • CSS background-clip 属性

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
    #example1 {
        border: 5px dotted black;
        padding:35px;
        background: #00FFFF;
    }
    
    #example2 {
        border: 10px dotted black;
        padding:35px;
        background: yellow;
        background-clip: padding-box;
    }
    
    #example3 {
        border: 10px dotted black;
        padding:35px;
        background: yellow;
        background-clip: content-box;
    }
    </style>
    </head>
    <body>
    
    <p>没有背景剪裁 (border-box没有定义):</p>
    <div id="example1">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    
    <p>background-clip: padding-box:</p>
    <div id="example2">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    
    <p>background-clip: content-box:</p>
    <div id="example3">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    
    </body>
    </html>

    如图:

  • 相关阅读:
    p1229
    2017.01.21
    P1136 超车 归并排序 求逆序对个数
    2017年寒假计划
    递归一题总结(OJ P1117倒牛奶)
    原来scanf读入字符串还能这样..
    2016NOIP总结
    公式推♂倒题
    kmp+DP x 子串相关的计数问题
    XXXXXXXX不会太多吧?
  • 原文地址:https://www.cnblogs.com/mhq-martin/p/8335586.html
Copyright © 2011-2022 走看看