详解：44 background-clip

最新推荐文章于 2021-03-08 17:29:06 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2021-03-08 17:29:06 发布

阅读量440

点赞数 2

分类专栏： CSS3最详解

本文链接：https://blog.csdn.net/qq_37805832/article/details/107588134

版权

CSS3最详解专栏收录该内容

54 篇文章 1 订阅

订阅专栏

//裁剪成白色哈，border的属性比如solid之类的不会裁剪。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>background-clip</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<style type="text/css">
		div{
			width: 200px;
			height: 100px;
			border:20px dashed rgba(0,0,0,.8);
			background:url(images/king.jpg) no-repeat pink;
			padding:30px;
			margin:20px;
		}
		.box1{
			background-clip:border-box;/*border以外的部分裁剪*/
		}
		.box2{
			background-clip:padding-box;//padding以外的
		}
		.box3{
			background-clip:content-box;
		}

	</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

</body>
</html>