如何使用CSS实现带指定区域圆角效果的高级渐变背景

你已经掌握渐变实现，只需要解决非标准圆角的话，按场景对应以下可行方案即可：

• 非对称外凸圆角（不同角弧度不一样、横纵方向的弧度不相等的场景）
  普通border-radius仅能实现等比例正圆角，其实它支持单独拆分每个角的水平、垂直半径，用斜杠分隔两组值即可实现任意非对称外凸圆角，不需要额外元素：

  /* 语法：border-radius: 左上横 右上横 右下横 左下横 / 左上纵 右上纵 右下纵 左下纵 */
  border-radius: 120px 0 0 40px / 40px 0 0 120px;
  

• 内凹圆角（两个色块衔接处的凹弧边，比如参考效果里的曲面衔接）
  这种效果没法直接用border-radius实现，推荐用同色伪元素遮罩实现：

  1. 给主体容器设position: relative
  2. 新增绝对定位的::before/::after伪元素，宽高为凹弧的直径，背景和下层背景色保持一致，加border-radius: 50%
  3. 把伪元素定位到衔接位置，偏移到刚好露出凹弧的位置即可，不需要改主体的圆角设置。

• 自由曲线圆角（波浪边、不规则曲边等复杂异形）
  常规属性搞不定的场景，直接用clip-path裁剪是最轻量的方案：

  1. 在设计稿里把你要的圆角轮廓导出为SVG path的d属性值
  2. 直接把值填到clip-path: path("")里，就能裁剪出任意你想要的曲边效果

  /* 示例路径，替换成导出的实际路径值即可 */
  clip-path: path("M0,60 C0,10 60,0 120,0 L400,0 C460,0 460,80 400,80 L120,80 C60,80 0,60 0,60 Z");
  

  注意：如果要给裁剪后的元素加阴影，不要用普通的box-shadow，换成filter: drop-shadow()就能正常生效。

• 可复用固定圆角图形
  如果圆角样式是需要多次复用的固定图形，直接把轮廓转成base64编码的SVG当背景图用，兼容性最好，不需要调整元素本身的布局。

踩坑提醒：如果是做两个色块叠放的衔接圆角，比如上层卡片叠在渐变背景上，一定要注意上层卡片的圆角半径要和下层预留的圆角空间匹配，不然会出现弧度生硬的问题。

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