CSS3 background-clip指定背景绘制区域

最新推荐文章于 2024-08-22 16:10:15 发布

凌冰_

最新推荐文章于 2024-08-22 16:10:15 发布

阅读量968

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/hlx20080808/article/details/69568879

版权

CSS3 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

background-clip属性指定背景绘制区域

index.html

<style type="text/css">
div {
	width:20%;
	height:100px;
	margin:15px;
	background:#CF0;
	border:10px dotted #000;  /* 点线 */
	float:left;
}

div:nth-of-type(1){
	padding:35px;  /*内边距 */
}
div:nth-of-type(2){
	padding:35px;
	background-clip:padding-box;    /* */
}
div:nth-of-type(3){
	padding:35px;
	background-clip:content-box;
}
</style>
</head>

<body>

<div>
<h3>没有背景剪裁 (默认值:border-box)<p/>CSS3中background-clip背景剪裁属性是从指定位置开始绘制。</h3>
</div>

<div>
<h3>padding-box<p/>CSS3中background-clip背景剪裁属性是从指定位置开始绘制。</h3>
</div>

<div>
<h3>content-box<p/>CSS3中background-clip背景剪裁属性是从指定位置开始绘制。</h3>
</div>

效果：