语法：
background-clip: border-box|padding-box|content-box;
参数值：
● border-box：默认值,表示元素的背景从border区域（包括border）以内开始保留背景。
背景会延伸至边框外沿（但是在边框下层）。
示例：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
.demo {
background-color: red;
color: white;
background-clip: border-box;
text-align: center;
border: 10px dashed black;
}
</style>
</head>
<body>
<div class="demo">
<h3>background-clip: border-box;</h3>
</div>
</body>
</html>效果图：
● padding-box：表示元素的背景从padding区域(包括padding)以内开始保留。
背景延伸至内边距（padding）外沿，不会绘制到边框处。
示例：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
.demo {
background-color: red;
color: white;
background-clip:padding-box;
padding: 25px;
border: 10px dashed black;
}
</style>
</head>
<body>
<div class="demo">
<h3>background-clip: padding-box; </h3>
</div>
</body>
</html>效果图：
● content-box：表示元素的背景从内容区域以内开始保留。
背景被裁剪至内容区（content box）外沿。
示例：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
.demo {
background-color: red;
color: white;
background-clip:content-box;
padding: 15px;
border: 10px dashed black;
}
</style>
</head>
<body>
<div class="demo">
<h3>background-clip: content-box; </h3>
</div>
</body>
</html>效果图：
以上就是CSS的background-clip属性有什么用？的详细内容，更多请关注0133技术站其它相关文章！
