按钮文本阴影强弱由偏移量、模糊半径、颜色透明度和叠加层数共同决定，单调blur-radius易导致失焦或消失；需协同调整三组变量，并注意多层叠加配色、响应式适配及常见失效场景。
按钮文本阴影强弱不是调一个值就能搞定的事，它由偏移量、模糊半径、颜色透明度和叠加层数共同决定，单改blur-radius往往适得其反。
text-shadow 参数对“强弱感”的真实影响
很多人以为把blur-radius调大就是“更强”，其实会变糊、失焦，甚至在 Safari 上直接消失。真正控制强弱的其实是三组变量的配合：
-
h-offset和v-offset决定阴影“脱离感”：0 0 是发光，2px 2px 是浮雕，-1px -1px 是压印 -
blur-radius控制边缘软硬：3px 以内是锐利投影，5–8px 是柔和光晕，超过 12px 在 iOS Safari 易闪烁或锯齿 - 颜色的
alpha值（如rgba(0,0,0,0.6)）比纯色更可控——降低透明度比减小模糊更安全
多层叠加时怎么避免“越叠越弱”
写 text-shadow: 0 0 5px #fff, 0 0 10px #fff; 看起来是加法，实际浏览器会做颜色混合，两层纯白叠加反而发灰、没层次。正确做法是：
- 每层用不同色相+递减 alpha，例如：
0 0 4px rgba(255,204,0,0.7), 0 0 8px rgba(255,102,0,0.5), 0 0 12px rgba(255,0,0,0.3) - 避免全用
#fff或hsl(0,0%,100%)，纯白在深色背景上易过曝，在浅色背景上则隐形 - 最多叠 4 层，再多不仅视觉难分辨，低端 Android 设备还会卡顿
响应式场景下阴影必须重设
PC 上看着刚好的 text-shadow: 2px 2px 4px rgba(0,0,0,0.3)，放到手机上可能让文字边缘发虚、点击区域误判。关键调整点：
- 小屏（
max-width: 768px）建议关闭模糊，改用锐利偏移：text-shadow: 1px 1px 0 rgba(0,0,0,0.2) - 禁用
blur-radius > 8px的写法，iOS Safari 对大模糊渲染不稳定 - 如果按钮用了
-webkit-text-fill-color: transparent配渐变，必须单独为该元素显式声明text-shadow，继承不来
常见失效原因比语法错误更值得排查
写了 text-shadow 却看不见？90% 不是写错了，而是被环境吞了：
- 父容器有
overflow: hidden→ 阴影超出被裁，检查 computed 样式里的overflow - 文字颜色是
transparent或rgba(0,0,0,0)→ 阴影没载体，不会自己显示 - macOS Safari 开了
-webkit-font-smoothing: antialiased→ 会吃掉小模糊值，临时关掉验证 - 用了伪元素
::before插入文字但没给它设text-shadow→ 伪元素不继承父级阴影
真正麻烦的是深色模式切换、字体抗锯齿开关、自定义属性联动这三者交叉时的表现——没有通用解法，只能实机多测，尤其注意 iPhone SE 和旧款 iPad 的渲染差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
