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实现彩色文本或纹理文本》?

  • 相关阅读:
    TouchAction实现连续滑动设置手势密码
    用命令方式启动、停止appium服务和app
    企业软件防火墙iptables
    磁盘分区
    docker-网络
    docker-镜像管理基础
    docker-简单操作
    docker-安装
    python-函数
    find一些常用参数的一些常用实例和一些具体用法和注意事项。
  • 原文地址:https://www.cnblogs.com/lingXie/p/11477438.html
Copyright © 2011-2022 走看看