求助：为附图生成带圆角的clip-path或蒙版的方法

一、用clip-path: path()实现带圆角蒙版 #

如果你的蒙版是不规则带圆角的形状，clip-path的path()函数可以直接定义带圆角的SVG路径，这是最直接的方案。比如要实现一个顶部左右圆角、底部中间内凹且带圆角的蒙版，代码示例如下：

.target-element {
  clip-path: path('M20,0 Hcalc(100% - 20) A20,20 0 0 1 100%,20 Vcalc(100% - 20) A20,20 0 0 1 calc(100% - 20),100% H60 A20,20 0 0 1 40,calc(100% - 20) V20 A20,20 0 0 1 60,0 H20 A20,20 0 0 1 0,20 Vcalc(100% - 20) A20,20 0 0 1 20,100% Z');
}

• 路径里的A20,20对应圆角半径（此处为20px），可按需调整数值；
• 路径命令遵循SVG语法，M为起点，H/V代表水平/垂直画线，A用于绘制椭圆弧（实现圆角）。

二、替代方案：border-radius + 伪元素组合 #

如果蒙版可拆分为多个圆角矩形的组合，用overflow:hidden配合伪元素叠加的兼容性更好（低版本浏览器也能支持）：

.mask-container {
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0; /* 顶部基础圆角 */
}
.mask-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #fff; /* 与容器背景色一致 */
  border-radius: 20px 20px 0 0;
  transform: translateY(50%);
}

• 原理是父容器设置顶部圆角，伪元素实现底部内凹圆角，通过transform调整位置，配合父容器overflow:hidden达成蒙版效果；
• 适合形状相对规则的带圆角蒙版场景。

三、SVG蒙版方案（兼容性最佳） #

针对复杂的带圆角蒙版，SVG蒙版是兼容性最好的选择，支持所有现代浏览器及大部分老版本浏览器：

<!-- 定义SVG蒙版 -->
<svg width="0" height="0" viewBox="0 0 400 300">
  <mask id="rounded-mask">
    <rect x="0" y="0" width="400" height="300" rx="20" ry="20" fill="#fff"/>
    <!-- 可添加其他带圆角路径修改蒙版形状 -->
    <path d="M100,300 A20,20 0 0 1 120,280 H280 A20,20 0 0 1 300,300 Z" fill="#000"/>
  </mask>
</svg>

<!-- 应用蒙版的元素 -->
<div class="target-element" style="mask: url(#rounded-mask); -webkit-mask: url(#rounded-mask);">
  <!-- 内容区域 -->
</div>

• SVG蒙版中白色区域为内容显示区，黑色区域为内容隐藏区；
• 可自由绘制带圆角的路径、矩形组合出所需蒙版形状，灵活性极高。

内容的提问来源于stack exchange，提问作者Adrian