用box-shadow配合lighten()或fadeout()动态调色实现hover发光，确保光色随主题自动适配；需声明transition且仅作用于box-shadow，扩散半径与模糊值需匹配以避免毛刺。
如何用Less写一个带发光hover效果的按钮
直接给结论：用 box-shadow 配合 lighten() 或 fadeout() 动态调色，比硬写十六进制更可控、可维护。关键不是“怎么发光”，而是“光怎么随颜色自动适配”。
为什么不能直接写死box-shadow值
写死比如 box-shadow: 0 0 12px #00aaff; 看似简单，但换主题色时要手动改所有阴影色；按钮用深色背景时，浅色光晕会发灰甚至看不见。Less 的函数能自动根据基础色生成协调的发光色：
-
lighten(@base-color, 20%)让发光色比按钮色更亮，适合深色按钮 -
fadeout(@base-color, 40%)降低不透明度，保留色相，适合浅色按钮 - 避免用
spin()或darken()——前者偏色，后者会让光变暗，违背“发光”本意
Less中hover发光的典型写法（含过渡）
必须加 transition，否则发光是突兀闪现。注意阴影扩散半径和模糊值要匹配，否则在高DPI屏上边缘毛刺：
.btn {
background-color: #3498db;
color: white;
transition: box-shadow 0.2s ease; // 必须声明transition，且只针对box-shadow
&:hover {
box-shadow: 0 0 16px 4px lighten(#3498db, 25%); // 扩散半径4px+模糊16px更柔和
}
}
// 封装成mixin更实用
.btn-glow(@color) {
background-color: @color;
transition: box-shadow 0.2s ease;
&:hover {
box-shadow: 0 0 16px 4px lighten(@color, 25%);
}
}
.primary-btn { .btn-glow(#e74c3c); }
.success-btn { .btn-glow(#2ecc71); }
容易被忽略的兼容性与性能点
box-shadow 发光在旧版 Safari（inset 混用，但单层外发光基本无问题。真正要注意的是：
- 别在
:active或动画中频繁触发box-shadow变化——它会触发重排（layout），卡顿明显 - 发光模糊值超过 32px 后，iOS Safari 渲染质量下降，边缘出现锯齿
- 如果按钮有圆角（
border-radius），确保box-shadow的扩散半径 ≤ 圆角值，否则光晕会“撑破”圆角形状
发光效果本质是视觉增强，不是功能必需。当设计系统要求深色模式或高对比度时，得准备降级方案——比如只加边框光晕或完全去掉阴影。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
