zoukankan      html  css  js  c++  java
  • background-clip指定背景绘制区域


    语法:
    background-clip: 值

    可取值:
    (1)border-box 背景绘制,背景从边缘处展开,无剪切

    (2)padding-box 背景绘制,背景从内边距开始展开 ,剪切掉边框  

    (3)content-box 背景绘制,背景从实际内容处展开 ,剪切掉内边距和边框

     

    具体例子与效果图:  

    第一种:background-clip:border-box;

    <div class="div1">
      <p>border-box</p>
      <p>border-box</p>
      <p>border-box</p>
      <p>border-box</p>
      <p>border-box</p>
    </div>
    
    
    .div1{
          width: 200px;
          height: 200px;
          background-color: red;
          background-clip: border-box;
          border:10px dotted blue;
          padding: 20px;
    }

    第二种:background-clip:padding-box;

            <div class="div2">
                <p>content-box</p>
                <p>content-box</p>
                <p>content-box</p>
                <p>content-box</p>
                <p>content-box</p>
            </div>
    
    
    .div2{
        width: 200px;
        height: 200px;
        margin:20px 0 ;
        background-color: red;
        background-clip: padding-box;
        border:10px dotted blue;
        padding: 20px;
    }

    第3种:background-clip:content-box;

    <div class="div3">
    	<p>content-box</p>
    	<p>content-box</p>
    	<p>content-box</p>
    	<p>content-box</p>
    	<p>content-box</p>
    </div>
    
    
    
    .div3{
             width: 200px;
             height: 200px;
             margin:20px 0 ;
             background-color: red;
             background-clip: content-box;
             border:10px dotted blue;
             padding: 20px;
     }

    这与-webkit-background-clip有和关联?????请看《css实现彩色文本或纹理文本》?

  • 相关阅读:
    实验四 Android开发基础
    20135322实验五实验报告
    Eclipse中Ant的配置与测试
    实验三 敏捷开发与XP实践
    实验二 Java面向对象程序设计
    Java实验报告一:Java开发环境的熟悉
    简单四则运算
    个人介绍
    团队冲刺第一阶段个人工作总结2
    团队冲刺第一阶段个人工作总结1
  • 原文地址:https://www.cnblogs.com/lingXie/p/11477438.html
Copyright © 2011-2022 走看看