CSS的clip-path属性定义了元素的剪切区域，它定义了元素的可见区域。它允许您创建复杂的形状和路径来确定如何剪切或显示元素。它主要与图像一起使用来裁剪或创建有趣的形状。
适用范围
所有元素；在 SVG 中，它适用于容器元素，不包括 <defs> 元素和所有图形元素。
语法
让我们检查所有可能的可用语法，以将值设置为属性剪辑路径。
关键字值
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="/css/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="/css/images/tree.jpg">
</body>
</html> CSS Clip-path: <geometry-box> 值
如果使用 <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: <basic-shape>
以下示例演示如何使用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="/css/images/tree.jpg" class="clip-inset">
</div>
<div class="image-container">
<h3>Circle</h3>
<img src="/css/images/tree.jpg" class="clip-circle">
</div>
<div class="image-container">
<h3>Ellipse</h3>
<img src="/css/images/tree.jpg" class="clip-ellipse">
</div>
<div class="image-container">
<h3>Ploygon</h3>
<img src="/css/images/tree.jpg" class="clip-ploygon">
</div>
<div class="image-container">
<h3>Path</h3>
<img src="/css/images/tree.jpg" class="clip-path">
</div>
</body>
</html>