box-shadow 是实现按钮悬停光晕的唯一可靠方案，关键参数为 0 0 12px 4px rgba(66,153,225,0.6)，需配合 transition、兼容性降级及移动端 :active 处理。
用 box-shadow 实现按钮悬停光晕，别碰 text-shadow
光晕效果本质是「外发光」，box-shadow 是唯一可靠方案。text-shadow 只作用于文字轮廓，哪怕字体超大，光晕也卡在字形边缘，根本撑不开「按钮级」的柔和扩散感。真正要的是容器层级的柔边投影。
关键参数组合：box-shadow: 0 0 12px 4px rgba(66, 153, 225, 0.6) —— 其中 12px 控制模糊半径（越大越散），4px 是扩张半径（决定光晕离按钮本体多远），rgba() 的 alpha 值必须低于 1，否则发硬不透明。
常见错误：
- 漏写扩张值（如写成
0 0 12px rgba(...)），光晕紧贴按钮边缘，像描边而非光晕 - 用
hsl()或纯色rgb()配 alpha，不如直接写rgba()稳定，部分旧版 Safari 对前者解析异常 - 同时加
transition却只过渡color或background，忘了加box-shadow，导致悬停时光晕突兀闪出
兼容性兜底：IE 和老 Edge 必须降级为单层阴影
IE10+ 支持 box-shadow，但不支持多层阴影叠加（比如同时写内外阴影），且对 rgba() 的 alpha 渲染偏生硬。若需兼容，放弃柔光晕，改用单层、低模糊、带扩张的硬边投影：
button:hover {
box-shadow: 0 0 0 3px #4299e1;
}
这个写法在 IE11、Edge 17–18 下能稳定显示蓝环，虽无渐变感，但至少有反馈。现代浏览器可在此基础上叠加强化版：
button:hover {
box-shadow:
0 0 0 3px rgba(66, 153, 225, 0.3),
0 0 16px 6px rgba(66, 153, 225, 0.4);
}
注意：两层阴影间用逗号分隔，第一层薄而近（模拟内环），第二层厚而远（模拟外晕），视觉上更立体。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
移动端点击无光晕？补上 :active 并禁用高亮
iOS Safari 默认给可点击元素加灰色半透明遮罩（-webkit-tap-highlight-color），会盖住光晕。不处理的话，手指一按，光晕消失，体验断裂。
必须显式清除并补全交互态：
- 加
-webkit-tap-highlight-color: transparent到按钮样式 - 为
:active状态单独定义box-shadow，建议比:hover更强一点（如模糊值 +2px），强化按下反馈 - 真机测试时，确保按钮有
cursor: pointer且绑定实际事件（哪怕空onclick），否则部分 Android WebView 不触发:active
性能陷阱：别在动画里狂刷 box-shadow 模糊值
如果用 JS 动态修改 box-shadow 的模糊半径做呼吸动画（比如从 0 → 20px 循环），在低端安卓机上极易掉帧。因为模糊计算是重绘（repaint）操作，不是合成（composite）友好属性。
更稳的替代方案：
- 用 CSS
@keyframes+transform: scale()搭配固定box-shadow，靠尺寸变化制造「光晕呼吸」错觉 - 若必须动模糊值，限制范围（如
8px ↔ 14px），避免跨度过大 - 加
will-change: box-shadow提前告知浏览器该属性将变，但仅在必要时用，滥用反而拖慢初始化
光晕容易让人沉迷调参，但记住：用户感知的是「是否有反馈」，不是「模糊值是否精确到小数点后一位」。过度优化参数不如先保证所有设备上都亮得出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
