[css].clip1 {
clip-path: circle(50%); /* 剪切为圆形 */
}[/css]
[css].clip2 {
clip-path: ellipse(50% 40% at 50% 50%); /* 剪切为椭圆形 */
}[/css]
[css].clip3 {
clip-path: inset(20px 40px 60px 80px); /* 剪切为矩形 */
}[/css]
属性中的ellipse()函数接受四个参数，分别是椭圆的水平半径、垂直半径、椭圆中心的水平位置和垂直位置。在示例中，50% 50%表示椭圆的半径是元素宽度和高度的一半，at 50% 50%表示椭圆的中心位于元素的中心位置。
属性中的inset()函数接受四个参数，分别是上、右、下、左边距的大小。在示例中，20px 40px 60px 80px表示上边距为20px，右边距为40px，下边距为60px，左边距为80px。
使用SVG路径剪切元素：
url()：引用一个SVG文件中的路径。
使用CSS函数自定义剪切路径：
polygon()：自定义多边形路径，可以指定多个点的坐标。path()：自定义路径，使用SVG路径语法。
[css].clip4 {
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* 8边形 */
}[/css]
[css]
.clip5 {
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); /* 箭头 */
}[/css]
[css]
.clip6 {
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); /* 中心矩形 */
}[/css]
[css].clip7 {
clip-path: path(‘M0 0 L150 200 L300 0 Z’); /* SVG写法的剪切为自定义路径 */
}[/css]
[css].clip8 {
clip-path: path(‘M100 0 L129.41 50 L200 55.19 L150 96.18 L161.82 150 L100 120 L38.18 150 L50 96.18 L0 55.19 L70.59 50 Z’); /* 剪切为自定义路径 */[/css]
}
.clip7示例：clip-path属性中的path()函数接受一个参数，该参数是一个使用SVG路径语法描述的路径。在示例中，路径描述了一个从坐标(0,0)到(150,200)再到(300,0)的路径，最后使用Z指令闭合路径。
.clip8示例：clip-path属性中的path()函数接受一个参数，该参数是一个使用SVG路径语法描述的路径。在示例中，路径描述了一个五角星，使用多个线段 (L) 连接五个顶点。
注意：clip-path属性是一个相对新的CSS属性，在某些浏览器中可能不被完全支持。为了兼容性，可以使用-webkit-clip-path前缀来适配WebKit内核的浏览器（如Chrome、Safari）。
请注意，在一些情况下，clip-path可能无法对一些元素（如表单元素）起作用。
以下是一个非常好用的在线调试工具
https://bennettfeely.com/clippy/
