CSS - clip-path 属性

上一页
下一页

CSS clip-path 属性定义了元素的剪裁区域，该剪裁区域定义了元素的可见区域。它允许您创建复杂的形状和路径，以确定应如何裁剪或显示元素。它主要与图像一起使用，以裁剪或创建有趣的形状。

适用于

所有元素;在 SVG 中，它适用于容器元素，不包括 <defs> 元素和所有图形元素。

语法

让我们检查所有可能的可用语法，以将值设置为属性 clip-path。

关键字值


clip-path: none;

<clip-source> 值


clip-path: url(resources.svg#c1);

<geometry-box> 值


clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

<basic-shape> 值


clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
	 	"M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

CSS clip-path - <clip-source> 值

您可以使用 SVG 路径命令来创建复杂的剪切路径。这在定义形状时提供了极大的灵活性。以下示例演示了这一点 -


<html>
<head>
<style>
	 	#clip-img {
	 	 	 clip-path: url("#clip-img")
	 	}
</style>
</head>
<body>
	 	<h4>Without clipping</h4>
	 	<img height="200" width="200" src="images/tree.jpg">
	 	<svg height="0" width="0">
	 	 	 <clipPath id="clip-img">
	 	 	 	 	<rect y="80" x="130" width="80" height="80" />
	 	 	 	 	<rect x="60" y="130" width="80" height="80" />
	 	 	 	 	<rect x="130" y="200" width="80" height="80" />
	 	 	 	 	<rect x="200" y="130" width="80" height="80" />
	 	 	 </clipPath>
	 	</svg>
	 	<h4>With clipping</h4>
	 	<img id="clip-img" height="200" width="200" src="images/tree.jpg">
</body>
</html>

CSS clip-path - <geometry-box> 值

如果将 clip-path 设置为 <geometry-box> 值与 <basic-shape> 结合使用，则它将定义基本形状的参考框。以下示例演示了如何使用clip-path： <geometry-box> 属性 -

并非所有浏览器都支持此值。

<html>
<head>
<style>
	 	 	 html,
	 	 	 body {
	 	 	 	 	height: 100%;
	 	 	 	 	box-sizing: border-box;
	 	 	 	 	background: #eee;
	 	 	 }
	 	 	 .row {
	 	 	 	 	display: flex;
	 	 	 	 	flex: 1 auto;
	 	 	 	 	flex-direction: row;
	 	 	 	 	flex-wrap: wrap;
	 	 	 }
	 	 	 .cell {
	 	 	 	 	margin: 0.5em;
	 	 	 	 	padding: 0.5em;
	 	 	 	 	background-color: #fff;
	 	 	 	 	overflow: hidden;
	 	 	 	 	text-align: center;
	 	 	 	 	flex: 1;
	 	 	 }
	 	 	 .note {
	 	 	 	 	background: grey;
	 	 	 	 	padding: 1em;
	 	 	 	 	margin: 0.5em 0.5em 0;
	 	 	 	 	font: 0.8em sans-serif;
	 	 	 	 	text-align: left;
	 	 	 	 	white-space: nowrap;
	 	 	 }
	 	 	 .note + .row .cell {
	 	 	 	 	margin-top: 0;
	 	 	 }
	 	 	 .container {
	 	 	 	 	display: inline-block;
	 	 	 	 	border: 1px dotted rgb(138, 26, 26);
	 	 	 	 	position: relative;
	 	 	 }
	 	 	 .container::before {
	 	 	 	 	content: "margin";
	 	 	 	 	position: absolute;
	 	 	 	 	top: 2px;
	 	 	 	 	left: 2px;
	 	 	 	 	font: italic 0.6em sans-serif;
	 	 	 }
	 	 	 .cell span {
	 	 	 	 	display: block;
	 	 	 	 	margin-bottom: 0.5em;
	 	 	 }
	 	 	 p {
	 	 	 	 	font-family: sans-serif;
	 	 	 	 	background: #000;
	 	 	 	 	color: rgb(110, 109, 195);
	 	 	 	 	margin: 2em;
	 	 	 	 	padding: 3em 1em;
	 	 	 	 	border: 1em solid rgb(143, 19, 225);
	 	 	 	 	width: 6em;
	 	 	 }
	 	 	 .box1 {
	 	 	 	 	clip-path: circle(25%);
	 	 	 }
	 	 	 .box3{
	 	 	 	 	clip-path: fill-box circle(25% at 25% 25%);
	 	 	 }
	 	 	 .box4 {
	 	 	 	 	clip-path: stroke-box circle(25% at 25% 25%);
	 	 	 }
	 	 	 .box5 {
	 	 	 	 	clip-path: view-box circle(25% at 25% 25%);
	 	 	 }
	 	 	 .box6 {
	 	 	 	 	clip-path: margin-box circle(25% at 25% 25%);
	 	 	 }
	 	 	 .box7 {
	 	 	 	 	clip-path: border-box circle(25% at 25% 25%);
	 	 	 }
	 	 	 .box8 {
	 	 	 	 	clip-path: padding-box circle(25% at 25% 25%);
	 	 	 }
	 	 	 .box9 {
	 	 	 	 	clip-path: content-box circle(25% at 25% 25%);
	 	 	 }
</style>
</head>
<body>
	 	 	 <div class="note">clip-path: circle(25%)</div>
	 	 	 <div class="row">
	 	 	 	 	<div class="cell">
	 	 	 	 	 	 <span>HTML</span>
	 	 	 	 	 	 <div class="container">
	 	 	 	 	 	 	 	 	 <p class="shape1">Happy <br /><em>clipping</em></p>
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 </div>

	 	 	 <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
	 	 	 <div class="row">
	 	 	 	 	<div class="cell">
	 	 	 	 	 	 <span>HTML</span>
	 	 	 	 	 	 <div class="container">
	 	 	 	 	 	 	 	 	 <p class="box3">Happy<br /><em>clipping</em></p>
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 </div>
	 	 	 <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
	 	 	 	 	<div class="row">
	 	 	 	 	 	 <div class="cell">
	 	 	 	 	 	 	 	 	 <span>HTML</span>
	 	 	 	 	 	 	 	 	 <div class="container">
	 	 	 	 	 	 	 	 	 	 	<p class="box4">Happy<br /><em>clipping</em></p>
	 	 	 	 	 	 	 	 	 </div>
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 <div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
	 	 	 <div class="row">
	 	 	 	 	<div class="cell">
	 	 	 	 	 	 <span>HTML</span>
	 	 	 	 	 	 <div class="container">
	 	 	 	 	 	 	 	 	 <p class="box5">Happy<br /><em>clipping</em></p>
	 	 	 	 	 	 </div>
	 	 	 </div>
	 	 	 </div>
	 	 	 <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
	 	 	 <div class="row">
	 	 	 	 	<div class="cell">
	 	 	 	 	 	 <span>HTML</span>
	 	 	 	 	 	 <div class="container">
	 	 	 	 	 	 	 	 	 <p class="box6">Happy<br /><em>clipping</em></p>
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 </div>
	 	 	 <div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
	 	 	 <div class="row">
	 	 	 	 	<div class="cell">
	 	 	 	 	 	 <span>HTML</span>
	 	 	 	 	 	 <div class="container">
	 	 	 	 	 	 	 	 	 <p class="box7">Happy<br /><em>clipping</em></p>
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 </div>
	 	 	 <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
	 	 	 <div class="row">
	 	 	 	 	<div class="cell">
	 	 	 	 	 	 <span>HTML</span>
	 	 	 	 	 	 <div class="container">
	 	 	 	 	 	 	 	 	 <p class="box8">Happy<br /><em>clipping</em></p>
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 </div>
	 	 	 <div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
	 	 	 <div class="row">
	 	 	 	 	<div class="cell">
	 	 	 	 	 	 <span>HTML</span>
	 	 	 	 	 	 <div class="container">
	 	 	 	 	 	 	 	 	 <p class="box9">Happy<br /><em>clipping</em></p>
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 </div>
</body>
</html>

CSS clip-path - 基本形状

以下示例演示如何使用 clip-path： <basic-shape> 属性为使用基本形状（如圆形、椭圆或多边形）的元素定义剪切区域 -


<html>
<head>
<style>
	 	.image-container {
	 	 	 display: flex;
	 	}
	 	.clip-inset {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 margin: 10px;
	 	 	 clip-path: inset(10% 10% 10% 10% round 10% 10% 10% 10%);
	 	}
	 	.clip-circle {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 margin: 10px;
	 	 	 clip-path: circle(40%);
	 	}
	 	.clip-ellipse {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 margin: 10px;
	 	 	 clip-path: ellipse(100px 50px at 100px 100px);
	 	}
	 	.clip-ploygon {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 margin: 10px;
	 	 	 clip-path: polygon(0 50%, 100% 50%, 50% 100%, 50% 0);
	 	}
	 	.clip-path {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 margin: 10px;
	 	 	 clip-path: 	path('M 100 100 L 0, 50 L 150,50 z');
	 	}
</style>
</head>
<body>
	 	<div class="image-container">
	 	 	 <h3>Inset</h3>
	 	 	 <img src="images/tree.jpg" class="clip-inset">
	 	</div>
	 	<div class="image-container">
	 	 	 <h3>Circle</h3>
	 	 	 <img src="images/tree.jpg" class="clip-circle">
	 	</div>
	 	<div class="image-container">
	 	 	 <h3>Ellipse</h3>
	 	 	 <img src="images/tree.jpg" class="clip-ellipse">
	 	</div>
	 	<div class="image-container">
	 	 	 <h3>Ploygon</h3>
	 	 	 <img src="images/tree.jpg" class="clip-ploygon">	
	 	</div>
	 	<div class="image-container">
	 	 	 <h3>Path</h3>
	 	 	 <img src="images/tree.jpg" class="clip-path">
	 	</div>
</body>
</html>
打印本页
上一页
下一页