题干与适用场景
你负责一个跨浏览器的卡片组件，现代浏览器可以显示 bevel、scoop 和 squircle，旧浏览器只识别 border-radius。请说明 corner-shape 的前置条件、回退策略、视觉和交互验收方式。
题目考察 CSS 几何、渐进增强和组件工程。corner-shape 修改的是已有 border-radius 生成的角形；没有有效半径时它不起作用。答案要区分形状绘制、内容布局和点击命中区域。
面试官考察点
强回答会先保留可用的 border-radius 基线，再通过特性查询叠加形状。它能说清一到四个值的角顺序、superellipse() 的正负曲率、相对角重叠时浏览器会约束半径，以及阴影和背景通常会跟随角形。
面试官还会关注你是否把角形误当成裁剪内容。MDN 示例指出内容仍按原始盒子布局，悬停区域也可能延伸到视觉角形之外；因此必须单独验收可访问名称、焦点环和命中区。
回答前需要澄清的问题
旧浏览器必须保持哪种视觉
如果旧浏览器只需保持圆角，直接保留 border-radius 即可；若品牌要求几何形状一致，就需要 SVG 或伪元素替代，成本和维护面会明显增加。
角形是否参与交互边界
确认按钮、卡片和拖拽区域是否需要按视觉轮廓命中。CSS 角形不一定改变内容和事件命中边界，不能只凭截图判断可用性。
是否需要动画和 RTL
动画要确认目标浏览器是否插值 superellipse()，并遵守减少动态效果偏好。多语言布局优先使用逻辑 longhand，避免把物理左上角误当成 inline 起点。
30 秒回答框架
“我先用 border-radius 提供所有浏览器的可用基线，再在 @supports (corner-shape: ...) 内叠加 corner-shape。角形只改变已有圆角的绘制，不负责重新布局内容；半径重叠时由浏览器约束，所以我会测试极端尺寸。交互上单独检查焦点环、命中区和 overflow，动画则做特性检测并提供 reduced-motion 回退。”
分步骤深入解答
第一步：建立可退化的基线
先写基础样式，保证没有 corner-shape 时卡片仍有边框、背景、阴影和圆角。再把增强规则放在特性查询中：
.card {
border-radius: 24px;
background: var(--surface);
box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}
@supports (corner-shape: scoop) {
.card {
corner-shape: scoop notch;
}
}不支持的浏览器会忽略未知声明，继续使用圆角基线。不要把关键对比度、文字可读性或操作提示只放在增强形状里。
第二步：解释值的映射和前置条件
一个值应用到四个角；两个值按对角线成组；三个值把第三个值用于右下角；四个值按左上、右上、右下、左下顺时针映射。corner-shape 依赖 border-radius，半径为零时不会产生形状。
superellipse() 的数值控制曲率，正负值形成凸、凹方向。面试中应强调语法值和视觉结果要在目标浏览器中截图对照，不能只凭设计工具名称推断。
第三步：处理重叠和绘制边界
当相对角的半径和形状会重叠时，浏览器会压缩对应半径以避免几何冲突。组件应测试窄卡片、极端百分比半径和高密度内容，确保文字、背景、边框和阴影没有穿帮。
背景、边框、outline、box-shadow、overflow 和 backdrop-filter 通常会沿角形绘制；内容本身仍按盒模型布局。需要真正裁剪图片或交互区域时，另行使用 clip-path、遮罩或语义化命中层。
第四步：设计交互和可访问性验收
焦点环不能因视觉角形被截断；键盘 Tab 顺序、可见焦点和点击区域要在支持与不支持两组浏览器中相同。若卡片整体是链接，保持完整矩形命中区通常比追求像素级轮廓更可用，并在视觉测试中记录这一取舍。
第五步：动画与逻辑方向
不同关键字可通过等价的 superellipse 值插值，但仍需确认实现支持。为 hover、focus 和状态变化设置明确时长，并在 prefers-reduced-motion: reduce 下关闭或缩短动画。多语言组件使用逻辑角形 longhand，避免 RTL 时视觉方向错误。
第六步：建立兼容矩阵
矩阵至少覆盖支持 corner-shape 的 Chromium、部分支持或不支持的浏览器、窄宽度、长文本、图片、阴影、键盘焦点、触摸命中和 reduced-motion。每个样例同时截图增强和回退结果，记录声明是否生效、布局是否变化、事件目标是否一致。
高质量示范回答
我会先把 border-radius 当作产品基线，再用 @supports 叠加 corner-shape。这样旧浏览器仍得到可用卡片，增强形状只改善外观。实现时确认半径不为零，解释一到四个值的映射，并用窄卡片和极端半径测试重叠约束。
我不会把角形等同于内容裁剪。背景、边框和阴影通常会跟随形状，但内容布局和点击命中区仍要单独验证；焦点环必须完整可见。动画加入 reduced-motion 分支，RTL 使用逻辑 longhand。最终用支持矩阵比较视觉、布局、键盘和触摸结果，而不是只看一张现代浏览器截图。
常见错误
- 错误表现 → 只写
corner-shape不写border-radius→ 失败原因 → 没有有效半径时形状不生效 → 修正方法 → 先提供圆角基线。 - 错误表现 → 用
corner-shape代替图片裁剪 → 失败原因 → 内容仍按原始盒子布局 → 修正方法 → 按需求使用 overflow、clip-path 或遮罩。 - 错误表现 → 认为视觉角形自动缩小点击区域 → 失败原因 → 命中区可能仍覆盖原始盒子 → 修正方法 → 用键盘、触摸和事件目标单独验收。
- 错误表现 → 只测一个宽度 → 失败原因 → 对角半径在窄容器中可能被约束 → 修正方法 → 加入极端尺寸和长文本样例。
- 错误表现 → 在不支持浏览器显示空白卡片 → 失败原因 → 把增强规则当作必要样式 → 修正方法 → 用特性查询和稳定基线渐进增强。
追问及应对
追问一：border-radius 是百分比时，corner-shape 会怎样？
先验证目标浏览器的计算结果，不把百分比直接换算成固定像素。用多个宽高比截图检查对角重叠和阴影连续性；若品牌形状必须稳定，可对增强层使用受控半径并保留基础层回退。
追问二：如何让焦点环也沿着角形？
先保证焦点环可见和对比度足够，再考虑 outline 或额外伪元素的视觉匹配。若实现会截断焦点环，宁可保留矩形环，也不要牺牲键盘用户的状态反馈。
追问三：corner-shape 与 border-shape 同时出现会怎样？
W3C 和 MDN 说明 border-shape 会使 border-radius 被忽略，而 corner-shape 依赖 border-radius，因此两者不能按叠加理解。设计系统应选择单一几何路径，并为另一条路径提供明确回退。
追问四：何时不用这个属性？
当目标浏览器覆盖不足、形状影响内容裁剪或团队无法维护多套视觉回退时，不要为了新语法引入复杂度。稳定的 border-radius、SVG 或伪元素只要满足可访问性和性能目标，就可能是更好的选择。