题干与适用场景
营销卡片需要一个会随容器宽度变化的弧形边缘。设计稿给出一条路径，但不能让装饰效果破坏内容、键盘焦点或旧浏览器布局。请说明如何用 shape() 配置 clip-path，比较 path()、polygon()，并给出渐进增强方案。
面试官考察点
- 是否知道
shape()是 CSS 语法的基本形状函数，而不是 SVG 路径字符串。 - 是否能处理单位、CSS 数学函数、容器尺寸和浏览器支持差异。
- 是否把裁剪当成装饰层，保留语义内容、焦点和可读降级。
回答前需要澄清的问题
- 形状是视觉装饰，还是承担信息、点击区域或文本阅读顺序？
- 目标浏览器矩阵是否允许使用尚未全面支持的 CSS Shapes Level 2 能力？
- 不支持新语法时，设计接受矩形、
polygon()近似，还是需要图片资产？
30 秒回答框架
我会让内容先按普通盒模型布局，再用 clip-path: shape(...) 作为视觉增强。shape() 允许 CSS 单位和数学函数，适合响应式尺寸；path() 依赖 SVG 路径字符串，polygon() 更容易降级但只能近似折线。发布前用 @supports 或特性检测选择增强，保留矩形和可读文字，并验证裁剪不会缩小焦点、命中区或辅助技术看到的语义。
分步骤深入解答
1. 先把内容与裁剪分开
卡片的标题、正文和按钮仍放在正常 DOM 顺序中。clip-path 只改变绘制区域，不应成为隐藏内容或重排阅读顺序的手段。把背景、边缘和插图分到装饰层，内容层保持可滚动和可聚焦。
2. 选择 shape() 的理由
shape() 使用 CSS 形式的命令来描述形状，可组合百分比、长度和 CSS 数学函数。相比 path() 的 SVG 路径字符串，它更容易随容器尺寸和设计令牌调整；相比 polygon()，它可表达曲线或更丰富的路径命令。
3. 写一个受控的增强样例
.card {
background: var(--surface);
overflow: clip;
}
@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {
.card {
clip-path: shape(
from 0 0,
line to 100% 0,
line to 100% 82%,
curve to 0 100% with 52% 88%,
close
);
}
}围栏中的命令仅示意语法；实际项目应以目标浏览器和规范实现为准。基础样式先保证背景、间距和文字可用，增强规则失败时不会留下空白卡片。
4. 设计降级层级
最稳妥的降级是普通矩形。若浏览器支持 polygon()，可提供折线近似；若设计必须保留曲线，可使用经过压缩的背景图片，但要保留 CSS 颜色和文字对比度。不要把未验证的复杂路径直接设为唯一布局。
5. 处理响应式和溢出
用百分比和容器尺寸表达关键节点，并在极窄、极宽、横屏和高缩放下检查形状是否裁掉按钮或文字。clip-path 可能让视觉区域变小，但不会替元素预留额外空间；内容仍需要合理的内边距、最小高度和滚动策略。
6. 验证可访问性边界
裁剪本身不改变 DOM 语义、屏幕阅读器顺序或键盘顺序，但视觉裁剪可以遮住焦点环、错误提示和指针命中区域。用键盘、放大、读屏和高对比度模式检查；必要时把焦点样式放在未裁剪的外层。
7. 管理动画与性能
如果形状随状态动画，先确认动画不会造成眩晕或掩盖内容，遵守 prefers-reduced-motion。在低端设备和长列表中观察绘制成本，避免每个卡片都使用复杂路径；静态装饰优先于持续重绘。
高质量示范回答
我会先让卡片按普通盒模型完成布局，标题、正文和按钮保持语义 DOM，再把曲线只作为 clip-path 的装饰增强。shape() 的 CSS 单位和数学函数适合响应式容器，path() 更像 SVG 字符串，polygon() 可作为较保守的近似。通过 @supports 提供增强，失败时保留矩形或已验证的近似，不让新语法决定内容是否出现。我会在极端宽度、缩放、键盘焦点、读屏、高对比度和 reduced motion 下验收，并确认裁剪没有挡住焦点环或点击目标。
常见错误
- 把
shape()当作可以直接复制 SVGpath()字符串的语法。 - 只写增强规则，没有可读的基础矩形样式。
- 让裁剪边缘遮住按钮、错误消息或焦点指示器。
- 用固定像素路径应对所有容器宽度和文字长度。
- 声称所有浏览器都支持新函数，却没有目标矩阵和特性检测。
追问及应对
为什么不用一张 SVG 图片？
如果形状是固定品牌资产，SVG 可能更稳定；选择 shape() 的理由是需要 CSS 单位、容器响应和主题令牌。应根据支持矩阵、维护成本和性能取舍。
@supports 通过但实际形状异常怎么办？
把特性检测视为语法门槛，不等于所有路径命令都可靠。用真实浏览器截图和交互测试覆盖关键命令，并准备更简单的降级路径。
裁剪会影响点击区域吗？
视觉裁剪可能影响命中体验，具体要在目标浏览器验证。按钮应保持足够尺寸和可见焦点，必要时把交互层移到未裁剪容器。
文字需要沿曲线排布怎么办？
clip-path 只裁剪区域，不会让文字沿路径排版。应使用独立排版方案或调整内容结构，不能把裁剪函数当成文本布局 API。
如何测试国际化内容？
使用最长翻译、不同字重、阿拉伯文或 CJK 混排，以及用户放大设置测试。形状只是背景装饰，不能因为短英文刚好不溢出就通过验收。
什么时候应放弃 shape()？
当支持矩阵、动画性能或设计一致性无法满足时，选择 polygon()、CSS 渐变、SVG 或普通矩形。面试中说明停止条件，比坚持新特性更重要。