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"，这意味着路径的坐标是相对于引用元素的边界框的。

注意事项

• clip-path 属性在旧版浏览器中可能不受支持或支持不完全。
• 使用 SVG 路径时，需要确保 SVG 元素的定义在 CSS 引用之前或在相同的文档中。
• 剪切路径可能会影响元素的布局，因为它们实际上会隐藏元素的一部分，但不影响其占据的空间。这可能需要额外的布局调整来确保布局的整洁。

CSS3剪贴路径（Clip-path）在线生成器工具 - 代码工具 - 脚本之家在线工具 (jb51.net)