<!DOCTYPE html>
<html>
<head>
<style>
#example1 { border: 10px dotted black;
padding: 35px;
background: yellow;
}
#example2 { border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: padding-box;
}
#example3 { border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
</style>
</head>
<body>
<h1>background-clip 属性</h1>
<p>No background-clip (border-box is default):</p>
<div id="example1">
<h2>Welcome to Shanghai</h2>
<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">
<h2>Welcome to Shanghai</h2>
<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">
<h2>Welcome to Shanghai</h2>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
</body>
</html>