css属性Clip-path

clip-path 允许你定义一个元素的可视区域的剪切形状。换句话说，你可以使用这个属性来裁剪或隐藏元素的一部分，使其只显示特定形状的区域，比如圆形、椭圆形、多边形或更复杂的 SVG 路径。

基本用法

clip-path 可以接受多种值，包括简单的形状（如圆形、椭圆形）和更复杂的形状（如多边形、SVG 路径）。

圆形（Circle）：通过指定圆心的位置和半径来定义。
椭圆形（Ellipse）：通过指定椭圆中心的位置、水平半径和垂直半径来定义。
多边形（Polygon）：通过指定多个点来定义任意多边形。
SVG 路径（SVG Path）：允许你使用 SVG 的 <path> 元素的 d 属性来定义复杂的剪切路径。

示例

圆形剪切

.circle-clip {  clip-path: circle(50% at center);  
}

这将创建一个圆形剪切路径，其半径为元素宽度和高度的 50%，圆心位于元素的中心。

椭圆形剪切

.ellipse-clip {  clip-path: ellipse(50% 30% at 50% 50%);  
}

这将创建一个椭圆形剪切路径，其水平半径为元素宽度的 50%，垂直半径为元素高度的 30%，中心点位于元素的中心。

多边形剪切

.polygon-clip {  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);  
}

这将创建一个菱形剪切路径，通过指定四个点来定义。

SVG 路径剪切

.svg-path-clip {  clip-path: url(#svgClipPath);  
}  <svg width="0" height="0">  <defs>  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">  <path d="M0.5,0 L0,0.5 0.5,1 1,0.5 z" />  </clipPath>  </defs>  
</svg>

在这个例子中，我们定义了一个 SVG 剪切路径，并将其存储在 <defs> 元素中。然后，我们通过 clip-path: url(#svgClipPath); 引用这个剪切路径。注意，SVG 使用了 clipPathUnits="objectBoundingBox"，这意味着路径的坐标是相对于引用元素的边界框的。