专题 C4：CSS 与设计
CSS 圆角与形状视觉指南
圆角和形状会直接影响层级、可点击感和品牌气质。把它们做成体系，比临时堆样式更可靠。
圆角要用 token，不要随手写
卡片、输入框、按钮和弹层如果各自定义圆角，很快就会出现视觉漂移。最稳妥的方式是先固定一组半径等级，再映射到组件角色。
统一的圆角尺度还能帮助你更早发现异常组件，让视觉审查不再依赖主观感觉。
形状表达要服务语义
- 三角形、缺口和 clip-path 更适合提示、气泡和方向性强调，不适合无意义装饰。
- 复杂 clip-path 只放在受控区域，并准备矩形回退样式。
- 把主形状、背景图案和边角变化放进同一套视觉语言里管理。
实用输入/输出示例
输入
组件：促销卡片 需求：16px 柔和圆角 + 右上角缺口
输出
border-radius: 16px clip-path: polygon(...) 低兼容环境回退为纯圆角卡片