text-shadow参数顺序固定为水平偏移、垂直偏移、模糊半径、颜色，缺一不可；多层叠加可实现描边等效果，但高DPI屏易发虚，IE9+和Safari9.3+才良好支持。
text-shadow 的四个参数顺序不能错
很多人写 text-shadow 时只写两个值，比如 text-shadow: 2px 2px #000，以为这就够了——其实它默认把模糊半径设为 0，但更关键的是：**顺序固定为「水平偏移、垂直偏移、模糊半径、颜色」**。漏掉模糊半径又写了颜色，浏览器会直接忽略整条声明。
- 正确写法：
text-shadow: 2px -1px 0.5px #ff6b6b - 错误写法：
text-shadow: 2px -1px #ff6b6b（缺少模糊半径，颜色被当成了模糊值，结果是无色阴影） - 颜色支持所有 CSS 颜色格式：
#333、rgb(51, 51, 51)、hsla(0, 0%, 20%, 0.8)都行，透明度必须用rgba或hsla显式声明
多层 text-shadow 可以叠加出立体/描边效果
单个 text-shadow 只能投一个影子，但逗号分隔多个声明就能叠加——这是实现文字描边、浮雕、内凹等效果的核心手段，不是“炫技”，而是实际 UI 中高频需求。
- 描边效果（常用于白字配浅背景）：
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 - 注意：所有层的模糊半径都设为
0，否则边缘会虚化，失去清晰描边感 - 性能提示：超过 4–5 层且带较大模糊值时，在低端 Android 或旧版 Safari 上可能触发重绘卡顿
text-shadow 在高 DPI 屏幕上容易发虚
这不是 bug，是渲染机制导致的：模糊半径单位是像素，而高 DPI 屏幕下 1px 物理尺寸更小，相同数值的模糊看起来更“糊”。尤其在 macOS 的 Retina 屏或 Windows 的缩放设置 >100% 时明显。
- 解决思路不是加大模糊值，而是用
rem或em替代px——但注意：text-shadow**不支持相对单位**，所以得靠 JS 动态计算或媒体查询适配 - 稳妥做法：用
@media (-webkit-min-device-pixel-ratio: 2)单独降模糊值，例如从2px改成1.2px - 别依赖
transform: scale()模拟，会放大整个元素，破坏布局流
IE 和旧版 Safari 对 text-shadow 支持有限
text-shadow 在 IE 9+ 才开始支持，IE 8 及以下完全无效；iOS Safari 直到 9.3 才支持多层阴影，之前只认第一个。如果你的项目还要兼容这些环境，不能只靠它做关键视觉传达。
立即学习“前端免费学习笔记（深入）”；
- 渐进增强方案：先确保文字本身可读，再用
text-shadow加效果；不要用阴影替代颜色对比度 - 检测支持的方法不是查 UA，而是用
CSS.supports('text-shadow', '1px 1px #000')，但注意该 API 在 Safari 9.1+ 才可用 - PostCSS 插件如
postcss-text-shadow无法真正 polyfill，只能删掉不支持的规则，别指望它生成filter: drop-shadow()替代——两者行为不等价
最易被忽略的一点：text-shadow 的颜色是叠加在文字内容之上的，不是替换文字颜色。也就是说，如果文字是半透明的，阴影也会透出底层背景——这在使用 rgba() 文字色时会意外暴露设计意图。
