border-radius 不支持 CSS 继承，应通过 SCSS @mixin 封装实现安全复用；避免 @extend 导致样式污染；单边控制需多参数 @mixin；iOS 旧版需 overflow: hidden 配合；全局变量统一定义于 _variables.scss 并禁用 em/rem。
border-radius 本身不支持 CSS 原生继承，所以“快速继承”不是靠父元素传值，而是靠 SCSS 的复用机制统一注入——选错方式会导致样式污染、响应失效或 iOS 渲染破框。
用 @mixin 封装比 @extend 更安全
@extend 看似省事，但会把圆角规则强行塞进其他选择器里，比如 .card-header @extend .btn 可能意外带上 padding 或 font-size。而圆角是纯视觉修饰，不该绑定语义类。
- 所有高频组件（按钮、卡片、输入框）统一走 @mixin radius-md 这类命名
- 不要用 @extend %rounded 抽象占位符——它无法接收参数，没法做单边控制或响应式分支
- 示例：
@mixin radius-md { border-radius: $radius-md; }
，调用时直接 @include radius-md
单边圆角必须用变量+多参数 @mixin，别硬写 calc()
想单独改右上角？别写 border-top-right-radius: calc(#{$radius-md} * 1.5)，Sass 编译后单位丢失会报错。
- 正确做法是扩展 @mixin 参数：@mixin rounded($tl: $radius-md, $tr: $radius-md, $br: $radius-md, $bl: $radius-md)
- 调用：@include rounded($tl: $radius-sm, $tr: 0)
- 所有参数默认回退到全局变量（如 $radius-md），避免硬编码数值
iOS 旧版（iOS 7–9）圆角裁剪失效，overflow: hidden 是刚需
这不是前缀问题，也不是 border-radius 值不够大，而是渲染层对子元素溢出控制不稳定。
- 父容器必须设 overflow: hidden（不能是 visible，也不能靠 -webkit-overflow-scrolling: touch 补救）
- 如果子元素含 position: absolute，它会突破父级圆角——得给它也加相同 border-radius
- 推荐封装 @mixin rounded-safe，内部自动加 overflow: hidden 和单边同步逻辑
全局变量定义位置和单位陷阱
圆角值散落在各处，改一次要 grep 全项目；混用 rem 和 px 会让编译结果不可控。
- 全局只在 _variables.scss 定义：$radius-sm: 2px;、$radius-lg: 8px;、$radius-round: 50%;
- 禁用 em/rem 做基础单位——字体缩放时圆角会意外变形
- 所有 border-radius 相关声明（包括 border-top-left-radius）都必须引用变量，不许直接写 4px
真正容易被忽略的点：圆角不是“画个弧线”就完事。它牵扯裁剪、定位、响应、跨浏览器一致性。越想“快速继承”，越要克制直接复制粘贴的冲动——先管住变量源头，再用带参 @mixin 控制出口，最后补上 overflow: hidden 这个 iOS 保命开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
