SCSS变量$shape直接控制border-radius是最轻量通用的圆角多态方案，支持数值、百分比、多值语法；配合map预设语义化形状族；桥接CSS自定义属性实现运行时切换；避免滥用clip-path，优先用border-radius降级。
SCSS变量控制border-radius实现圆角多态
直接用$shape变量驱动border-radius是最轻量、最通用的形状多态方案。它不依赖伪元素或SVG，兼容所有现代浏览器，且能和CSS自定义属性联动。
常见错误是把$shape写成字符串（如"rounded-lg"），导致Sass编译报错Invalid CSS after "...radius: #{$shape}": expected expression——变量必须是数值或带单位的长度值。
-
$shape: 0→ 矩形 -
$shape: 4px→ 小圆角 -
$shape: 50%→ 圆形/椭圆（需配合等宽高等比例容器） -
$shape: 10px 20px 0 30px→ 不对称圆角（支持空格分隔的四个值）
示例：
@mixin shape($shape) {
border-radius: $shape;
}
<p>.btn {
@include shape(6px);
}
.btn--pill {
@include shape(999px);
}
</p>
用map + @each实现预设形状族切换
当项目需要统一管理「基础圆角语义」（如sm/md/lg）时，硬编码多个变量易失控。用$shapes map配合@each生成类名更可持续。
注意：map键名不能含连字符（rounded-sm非法），建议用下划线或驼峰；生成的CSS类名再做映射转换。
- 定义
$shapes: (sm: 2px, md: 6px, lg: 12px, full: 50%) - 循环中用
#{'rounded-' + $key}拼接类名，避免rounded-sm被Sass误解析为减法 - 不推荐在map里存
0——部分旧版iOS Safari对border-radius: 0渲染有微小偏移，显式写0px更稳妥
示例片段：
$shapes: (sm: 2px, md: 6px, lg: 12px, full: 50%);
<p>@each $key, $val in $shapes {
.rounded-#{$key} {
border-radius: $val;
}
}
</p>
结合CSS自定义属性实现运行时形状切换
纯SCSS变量只能编译时确定形状，若需用户点击切换（如主题设置里的“圆角强度滑块”），必须桥接CSS自定义属性。--shape-radius作为中间层，SCSS只负责注入默认值和媒体查询响应逻辑。
容易忽略的是：自定义属性无法直接参与Sass计算（如calc(var(--shape-radius) * 2)必须在CSS层写，不能放在@include里）；同时要为IE提供border-radius回退值。
- 在:root中设
--shape-radius: 8px，组件用border-radius: var(--shape-radius, 8px) - 用
@media (prefers-reduced-motion: reduce)将--shape-radius设为0px，兼顾可访问性 - JavaScript动态修改
style.setProperty('--shape-radius', '24px')即可实时生效，无需重载样式表
避免clip-path带来的性能与兼容陷阱
有人试图用clip-path: polygon()或path()实现更复杂的形状（如切角、波浪边），但这是高成本方案：每次变更都会触发layout+paint，且path()在Firefox和Safari中支持度极差。
真正需要非矩形轮廓时，优先检查是否能用mask-image（PNG alpha通道）或SVG mask-position实现动画。
如果坚持用clip-path，务必：
- 只对
position: absolute或fixed元素使用，避免污染文档流重排 - 避免在
:hover中动态切换复杂polygon路径，改用transform: scale()模拟“膨胀”效果 - 始终提供
border-radius作为降级，例如clip-path: polygon(...); border-radius: 12px;
形状多态的核心不是炫技，而是让同一套组件在不同上下文里自然适配视觉语言——border-radius变量覆盖90%场景，其余交给具体需求裁决。别为了“支持三角形”提前引入clip-path，等设计真提了三角形按钮再说。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
