CSS 基础学习-251 css使用background-clip属性

由 hrs, 13 二月, 2024

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>

运行效果：

 

标签

评论