css background-clip属性简介说明


摘要:
下文讲述css中background-clip属性的功能简介说明,如下所示:


css background-clip属性功能说明

css background-clip属性的功能是为背景颜色开始绘制区域,background-clip是用于设置背景颜色开始绘制的区域

注意事项:
css background-clip属性需同background-color属性一起使用。

css background-clip 语法说明;
css background-clip:border-box|padding-box|content-box
属性值说明:
1.border-box
从元素的外边框起始位置开始铺设背景图片
2.padding-box
从元素的padding开始位置开始铺设背景图片
3.content-box
从内容的开始位置铺设背景图片

css background-clip属性举例应用

<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
 
 div{
  border:10px dashed green; 
  width:250px; 
  height:200px; 
  padding:10px; 
  margin-top:10px; 
  background-repeat:no-repeat;
}
.border-box{ 
  background-clip:border-box;
  background-color:red; 
} 
 
.padding-box{ 
  background-clip:padding-box;
  background-color:red; 
} 
 
.content-box{ 
  background-clip:content-box;
  background-color:red; 
} 
 
</style>
</head>
<body>

<div  class='border-box' >  </div>
 
<div  class='padding-box' >  </div>
 
<div  class='content-box' >  </div>
 
</body>
</html>
css background-clip属性简介说明

css background-clip属性简介说明