语法
clip-path: clip-source | basic-shape | geometry-box | none | initial | inherit;
clip-path属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
body {
margin: 0;
padding: 0;
background-color: #eee;
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
justify-content: center;
}
.container div {
background-image: url("/bg.jpg");
background-position: center;
background-size: cover;
color: #000;
font-size: 18px;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.example {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>
</head>
<body>
<h1>Clip-path 属性示例</h1>
<div class="container">
<div class="example">polygon</div>
</div>
</body>
</html>
包含所有值的 clip-path 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
body {
margin: 0;
padding: 0;
background-color: #eee;
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
justify-content: center;
}
.container > div {
background-image: url(/bg.jpg);
background-position: center;
background-size: cover;
color: #000;
font-size: 18px;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
clip-path: none;
}
.box2 {
clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
/* values are from-top, from-right, from-bottom, from-left */
}
.box3 {
clip-path: circle(50% at 50% 50%);
}
.box4 {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.box5 {
clip-path: ellipse(90px 50px at 100px 100px);
}
.box6 {
clip-path: inherit;
}
.box7 {
clip-path: initial;
}
.box8 {
clip-path: unset;
}
</style>
</head>
<body>
<h2>Clip-path 属性示例</h2>
<div class="container">
<div class="box1">none</div>
<div class="box2">inset</div>
<div class="box3">circle</div>
<div class="box4">polygon</div>
<div class="box5">ellipse</div>
<div class="box6">inherit</div>
<div class="box7">initial</div>
<div class="box8">unset</div>
</div>
</body>
</html>
clip-path 属性允许指定一个剪切区域，该区域设置应该显示元素的哪个部分。
剪切区域外的那些部分被隐藏。
该属性有四个值：
- clip-source
- basic-shape
- geometry-box
- none
已弃用的剪辑属性将替换为剪辑路径属性。
| 初始值 | none |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 不可继承 |
| 可动画的 | 如果指定了basic-shape，则可以动画 |
| 版本 | CSS1. |
| DOM 语法 | object.Style.Clippath =“none”; |
CSS clip-path 属性值说明
| 值 | 描述 |
|---|---|
| <clip-source> | ％26LT; URL％26gt;引用SVG％26LT; CLIPPATH％26GT;元素。 |
| <basic-shape> | 尺寸和位置由％26LT定义的形状;几何箱％26gt; |
| <geometry-box> | 定义基本形状的参考框。 |
| none | 未创建剪切路径。 |
| initial | 它使属性使用其默认值。 |
| inherit | 它从其父母元素继承了属性。 |
日期：2020-06-02 22:14:25 来源：oir作者：oir