直接结论：别自己手写前缀，用 @include border-radius() 就行——前提是已引入 Compass 或现代 Sass 库；若纯原生 SCSS，@mixin 里只需输出标准 border-radius，旧前缀已无必要。
直接结论：别自己手写前缀，用 @include border-radius() 就行——前提是已引入 Compass 或现代 Sass 库；若纯原生 SCSS，@mixin 里只需输出标准 border-radius，旧前缀已无必要。
为什么现在不用手动加 -moz/-webkit 前缀
Chrome 4、Firefox 4、Safari 5.1、Edge 12+ 全都原生支持 border-radius，且无兼容性差异。2026 年再写 -webkit-border-radius 不仅冗余，还会让编译后 CSS 体积变大、可读性下降。
- Compass 等老库保留前缀是为兼容 IE9–/Android 2.3 等早已退出主流的环境
- 现代构建工具（如 Dart Sass + Autoprefixer）会在 postcss 阶段按
browserslist自动补全——你只管写标准语法 - 手写前缀还容易漏掉
-ms-或拼错-khtml-，反而引入隐性 bug
纯 SCSS 下推荐的圆角 mixin 写法
聚焦真实需求：支持单值、多值、响应式、单位灵活。避免“万能参数”，用明确命名的参数提升可读性：
@mixin rounded($radius: 4px, $top-left: null, $top-right: null, $bottom-right: null, $bottom-left: null) {
@if $top-left == null {
border-radius: $radius;
} @else {
border-radius: $top-left $top-right $bottom-right $bottom-left;
}
}
-
$radius默认4px，调用@include rounded(8px)即设四角统一 - 传四个值时自动走多值分支：
@include rounded(null, 6px, 0, 6px, 0) - 不推荐把
em/rem和px混在一个参数里做类型判断——易出错且无实际收益
需要兼容 iOS Safari 旧版圆角裁剪问题？加 overflow: hidden 才是关键
iOS 7–9 的 border-radius 对子元素溢出控制不稳定，常出现圆角内内容“破框”。这不是前缀问题，而是渲染机制缺陷：
立即学习“前端免费学习笔记（深入）”；
- 单纯加
-webkit-overflow-scrolling: touch无效 - 必须配合
overflow: hidden在父容器上（且不能是visible） - 如果子元素含
position: absolute，需额外给它加border-radius同步处理，否则露角 - 真要支持 iOS 8，建议用
@mixin rounded-safe封装这个组合逻辑，而非堆砌前缀
别在 mixin 里硬编码媒体查询做响应式圆角
想实现「移动端小圆角、桌面端大圆角」？不要这样写：
@mixin rounded-responsive {
border-radius: 4px;
@media (min-width: 768px) {
border-radius: 12px;
}
}
这会导致所有调用该 mixin 的选择器都重复生成同一段媒体查询，CSS 膨胀。正确做法是把断点逻辑交给外部：
- 用
@mixin rounded($radius)保持原子性 - 在组件级用
@include rounded(4px); @include respond-to(md) { @include rounded(12px); } - 或传入 map：
@include rounded(map-get($radii, sm))，由设计系统统一管理数值
真正容易被忽略的是：圆角值不是越“灵活”越好——项目里通常只有 3–4 个固定档位（2px/4px/8px/12px），写死比参数更稳定、更易维护。
