background-clip指定背景绘制区域

Posted 2022-10-06 lingxie

语法：
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实现彩色文本或纹理文本》？