胶囊按钮的圆角应为按钮高度一半，用mixin封装可确保自适应：.capsule-btn(@height: 40px) { height: @height; line-height: @height; padding: 0 24px; min-width: @height; border-radius: round(@height / 2); white-space: nowrap; }
Less 里怎么用 Mixin 写胶囊按钮的圆角逻辑
胶囊按钮的核心是左右两端完全圆角（border-radius: 50px 或等宽值），但直接写死数值不灵活，尤其当按钮高度变化时，圆角必须随高自适应才能真正“贴合”。Mixin 是最干净的解法，不是为了炫技，而是避免重复算值、漏改、响应式失配。
关键点在于：圆角值应等于按钮高度的一半，而不是固定 999px 这类“伪全圆”——后者在小尺寸按钮上会溢出，且无法响应式缩放。
实操建议：
- 定义一个接收
@height参数的 Mixin，内部用round(@height / 2)算出理想圆角值 - 同时把
padding、line-height和min-width一并封装进去，保证文字垂直居中和最小宽度不塌缩 - 别忘了加
white-space: nowrap，防止长文本换行破坏胶囊形状
.capsule-btn(@height: 40px) {
height: @height;
line-height: @height;
padding: 0 24px;
min-width: @height;
border-radius: round(@height / 2);
white-space: nowrap;
}
为什么不能直接用 border-radius: 50%
border-radius: 50% 看似省事，但它基于盒模型的宽高比例计算，不是绝对值。当按钮内容变多、min-width 生效或父容器限制宽度时，按钮可能变宽但高度不变，此时 50% 就会把圆角撑成椭圆，失去“胶囊”感。
常见错误现象：border-radius: 50% 在 Flex 容器里拉伸后，左右变成扁椭圆；或者在移动端横屏时突然变形。
更稳妥的做法：
- 坚持用
border-radius: round(@height / 2)，只依赖高度，和宽度解耦 - 如果按钮需支持不同尺寸（sm/md/lg），就导出多个带默认参数的 Mixin 版本，比如
.capsule-btn-sm()内部调用.capsule-btn(32px) - 避免在调用处手动覆盖
border-radius，否则会绕过 Mixin 的自适应逻辑
如何让胶囊按钮在不同主题下复用圆角逻辑
Mixin 本身不处理颜色或阴影，但可以配合 Less 变量做主题扩展。重点不是“一套样式打天下”，而是让圆角计算逻辑不被主题污染——比如深色模式下按钮高度没变，圆角就不该变。
实操建议：
- 把尺寸相关变量（
@btn-height、@btn-padding-x）和视觉变量（@btn-bg、@btn-shadow）分开定义 - 在主题文件里只重载视觉变量，Mixin 调用仍用原始
@btn-height，确保圆角一致性 - 如果某主题需要微调圆角（比如想更“钝”一点），不要改 Mixin，而是新增一个
@capsule-rounding-factor: 0.45变量，让 Mixin 支持乘数调节
.capsule-btn(@height: 40px, @factor: 0.5) {
border-radius: round(@height * @factor);
}
编译后 CSS 体积和兼容性要注意什么
Less Mixin 是编译时展开的，不会增加运行时开销，但滥用会导致 CSS 体积膨胀——比如每个按钮都单独调用 .capsule-btn(40px)，而非统一 class 复用。
容易踩的坑：
- 在大量原子组件（如图标按钮、标签按钮）里重复调用 Mixin，生成冗余 CSS 规则
- 忘记加
box-sizing: border-box，导致padding+height实际高度超标 - IE11 不支持
border-radius百分比值，但border-radius: 20px完全兼容；所以用round()计算出的 px 值反而更安全
真正难的是保持「按钮高度可变」和「圆角始终贴合」之间的同步，一旦高度由 JS 动态控制（比如根据字体大小调整），Less 就无能为力了——这时候就得切到 CSS 自定义属性或 JS 计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
