码迷,mamicode.com
首页 > 其他好文 > 详细

background-clip指定背景绘制区域

时间:2019-09-06 18:50:47      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:http   效果   mic   文本   绘制   div2   java   css   content   


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

background-clip指定背景绘制区域

标签:http   效果   mic   文本   绘制   div2   java   css   content   

原文地址:https://www.cnblogs.com/lingXie/p/11477438.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!