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> 运行效果：
评论