css使用background-clip属性
CSS background-clip 属性指定背景的绘制区域。
该属性接受三个不同的值:
border-box - 背景绘制到边框的外部边缘(默认)
padding-box - 背景绘制到内边距的外边缘
content-box - 在内容框中绘制背景
下面的例子展示了 background-clip 属性:
实例代码:
<doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#example1{
border:10px dotted black;
background:yellow;
padding:15px;
}
#example2{
border:10px dotted black;
background:yellow;
padding:15px;
background-clip:padding-box;
}
#example3{
border:10px dotted black;
background:yellow;
padding:15px;
background-clip:content-box;
}
</style>
</head>
<body>
<h1>background-clip 属性</h1>
<p>No background-clip (border-box is default)</p>
<div id="example1">
<h3>Welcome to SHanghai</h3>
<p>shanghai is one of the four direct-administered municipalities of the people's Republic of China. Welcome to Shanghai</p>
</div>
<p> background-clip:padding-box</p>
<div id="example2">
<h3>Welcome to SHanghai</h3>
<p>shanghai is one of the four direct-administered municipalities of the people's Republic of China. Welcome to Shanghai</p>
</div>
<p>background-clip:content-box</p>
<div id="example3">
<h3>Welcome to SHanghai</h3>
<p>shanghai is one of the four direct-administered municipalities of the people's Republic of China. Welcome to Shanghai</p>
</div>
</body>
</html>
运行效果:
![](/sites/default/files/inline-images/css-251.png)
评论