如何实现弧形图片边框 border-radius属性无法达到预期效果

目标参考效果如下：

首先明确：border-radius属性只能生成对称的正圆/椭圆圆角，无法实现这种上下边缘带内凹弧度的非规则轮廓，所以常规圆角写法确实达不到预期，可落地的实现方案如下：

• CSS clip-path 纯CSS方案（优先推荐）
  直接通过贝塞尔路径定义裁剪轮廓，不需要额外引入资源，代码量最小。可以通过调整路径的控制点参数，匹配需要的弧度大小。
  基础实现代码：

  .arc-image {
    width: 100%;
    display: block;
    /* 路径参数可根据实际弧度需求微调 */
    clip-path: path('M0 0 C24% 4%, 76% 4%, 100% 0 L100% 100% C76% 96%, 24% 96%, 0 100% Z');
  }
  

  如果需要添加弧形描边，不要直接用元素自带的border属性（会被clip-path裁剪掉），可以搭配伪元素或者drop-shadow滤镜实现描边效果。

• SVG裁剪遮罩方案（兼容性最优）
  把自定义弧形路径定义在SVG的裁剪规则里，再绑定到图片上，弧度调整灵活度最高，全版本现代浏览器都支持。
  基础实现代码：

  <!-- 全局定义裁剪路径，页面内可以复用 -->
  <svg width="0" height="0" style="position:absolute;">
    <defs>
      <clipPath id="arcShape" clipPathUnits="objectBoundingBox">
        <path d="M0 0 C0.24 0.04, 0.76 0.04, 1 0 L1 1 C0.76 0.96, 0.24 0.96, 0 1 Z" />
      </clipPath>
    </defs>
  </svg>
  
  <!-- 应用裁剪的图片 -->
  <img src="your-pic.jpg" class="arc-image" alt="示例图">
  <style>
    .arc-image {
      width: 100%;
      clip-path: url(#arcShape);
    }
  </style>
  

  可以直接在SVG可视化编辑器里拖拽控制点调整弧度，不用手动计算贝塞尔参数，调整效率更高。

• 双层叠加方案（适合定制化边框场景）
  如果需要做渐变、彩色的粗弧形边框，可以写两个同弧度的元素上下叠放：底层元素尺寸稍大，设置成边框需要的颜色/渐变，上层元素放图片、尺寸比底层小2倍边框宽度，两个元素居中对齐，露出来的底层边缘就是均匀的弧形边框。

注意：不建议用切图背景的方式实现，后续换图、调整尺寸适配不同屏幕的维护成本很高。

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