CSS corner-shape 怎么做可控异形圆角：border-radius、superellipse() 与降级验收

设计系统里经常会遇到这种小但顽固的需求：卡片想保留圆角的柔和感，又想在某个角做出切角、内凹或 squircle 效果。只写 border-radius 只能改变圆弧半径，不能表达角的形状；CSS 的 corner-shape 正好补上了这层控制。

先把圆角半径和角形状拆开

border-radius 决定角落预留的作用范围有多大，corner-shape 决定这个范围里采用什么类型的曲线。下面这段是可以直接放进组件样式的最小组合写法：

.feature-card {
  width: min(100%, 420px);
  padding: 24px;
  border: 1px solid #c8d7e8;
  border-radius: 28px;
  corner-shape: scoop notch round bevel;
  background: #f7fbff;
  box-shadow: 0 16px 32px rgb(45 72 106 / 14%);
}

四个值按左上、右上、右下、左下的顺时针顺序一一对应。只写一个值的时候四个角效果统一；写两个值会分别作用于对角；写三个值的话第二个值会同时分配给右上和左下。这里不用急着把四个角都设成不同形状，组件需要稳定的视觉语义时，统一使用 squircle 或只突出单个角，后续维护成本会低很多。

四类关键词分别适合什么场景

关键词不是无用的装饰性名词，它们会实实在在改变同一段圆角区域的边界形态。可以先用关键词搭建统一的设计语言，后续需要调整细节时再换成 superellipse()。

如果设计稿要求的曲线比自带关键词实现的效果更柔和，可以直接写 superellipse(0.6)。正负值会改变曲线的弯曲方向和程度，但不同浏览器对实验性数值的支持并不完全一致，发布前必须做好兼容性分支判断。

用 @supports 把增强样式关在安全边界内

当前 corner-shape 还不是 Baseline 全平台可用的标准能力。推荐先给所有浏览器设置一套可靠的普通圆角样式，确认基础体验正常后，再在支持新属性的环境里覆盖增强样式：

.feature-card {
  border-radius: 28px;
  corner-shape: round;
}

@supports (corner-shape: scoop) {
  .feature-card {
    corner-shape: scoop notch round bevel;
  }
}

不支持新属性的浏览器会直接忽略整个未知声明，仍然保留预先设置的 border-radius: 28px。如果产品必须保证不同环境下四角视觉差异尽可能小，可以把基础样式设为 border-radius: 20px，增强层再启用 squircle，这样不同环境下的视觉过渡会更温和。

边框、阴影和 overflow 要一起验收

角形状不只会改变元素背景的裁剪路径。边框、轮廓、阴影、背景效果和 overflow 都会跟着角形状同步变化，所以验收要围绕真实运行的组件状态展开，不能只对着一个静态演示示例走流程。

• 给卡片加上边框和阴影，确认两者没有漏出旧的圆弧边缘缝隙。
• 卡片内部放一张超出边界的图片，确认 overflow: hidden 与定义的角形状完全一致。
• 在键盘 Tab 导航和鼠标点击场景下检查按钮命中区域；视觉上的凹角不代表对应区域的交互功能可以被禁用。
• 调整相邻角的半径放大，确认浏览器内置的半径约束规则不会挤压内部文字或产生意外缺口。

.feature-card {
  overflow: hidden;
}

.feature-card a:focus-visible {
  outline: 3px solid #1b6ee8;
  outline-offset: 4px;
}

常见问题

只写 corner-shape，为什么页面看不到变化？

因为它必须依赖非零的 border-radius 才能生效。先给元素设置合适的圆角半径，再检查当前浏览器是否支持该属性。

corner-shape 能替代 clip-path 吗？

不能完全替代。它更适合调整已有圆角的形状，同时能让边框、阴影等原生效果同步跟随形态变化；复杂多边形的裁剪需求仍然建议评估 clip-path 或其他适配方案。

生产环境现在能直接使用吗？

可以作为渐进增强特性上线，但不要把它作为信息传达的唯一载体。基础圆角、文字内容和交互状态要在不支持该属性的环境下也能正常运行。

为什么 corner-shape 和 border-shape 不能同时依赖？

border-shape 与 border-radius 的底层渲染机制不兼容；一旦使用前者，元素原本的圆角半径就会被忽略，依赖半径规则的 corner-shape 也就无法正常工作。

发布前检查清单

1. 基础层是否配置了非零的 border-radius，所有增强样式是否放在 @supports 内部。
2. 设置的关键词或 superellipse() 是否符合设计目标，四个角的数值顺序是否按顺时针规则核对过。
3. border、shadow、overflow、focus-visible 状态和小屏显示效果是否在真实组件环境里复查过。
4. 新属性不生效的降级场景下，文字可读性、对比度、按钮点击范围和信息层级是否仍然完整可用。