求助：如何用CSS制作适配图片的类椭圆形状蒙版？

直接给你两种可行的方案，不用依赖伪元素，能直接作为图片蒙版使用：

方法一：优化clip-path路径参数 #

之前用clip-path没做出效果，大概率是参数没匹配目标形状。可以用path()函数定义精确的贝塞尔曲线路径，直接给图片设置：

.masked-img {
  width: 400px;
  height: 300px;
  /* 路径可根据实际尺寸调整坐标，下面是近似截图形状的示例 */
  clip-path: path('M30,120 C30,30 370,30 370,120 C370,210 30,210 30,120 Z');
}

这个路径是对称的类椭圆，通过贝塞尔曲线控制上下两端的弧度，比单纯的border-radius更灵活，能做出截图里那种“上下收窄、中间圆润”的形状。你可以用在线路径编辑器微调坐标，完全匹配目标样式。

方法二：CSS mask配合SVG（更精准） #

如果clip-path的曲线不好拿捏，用SVG定义精确的蒙版是更稳妥的选择：

1. 先在HTML里内联一个隐藏的SVG，定义蒙版形状：

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <clipPath id="oval-mask">
      <path d="M30,120 C30,30 370,30 370,120 C370,210 30,210 30,120 Z" />
    </clipPath>
  </defs>
</svg>

2. 给图片应用蒙版：

.masked-img {
  width: 400px;
  height: 300px;
  mask: url(#oval-mask);
  -webkit-mask: url(#oval-mask); /* 兼容Chrome、Safari等 */
}

这种方法可以用专业SVG工具（比如Figma、Illustrator）绘制完全和截图一致的形状，导出路径后替换到SVG里即可，适配性和精准度都更高。

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