ie6–ie8完全不支持text-shadow，因trident引擎未解析该属性；filter:drop-shadow()仅适用于纯色背景+实心字体，且参数顺序为drop-shadow(x y blur color)，无spread；png贴图需兼顾可访问性与多倍图适配。
IE6–IE8 里 text-shadow 完全无效，别浪费时间调试写法
不是你写错了，是 IE6–IE8 的 Trident 渲染引擎压根不解析 text-shadow 这个属性——连 warning 都不会抛，直接当不存在。试图加 -ms-text-shadow 或其他前缀毫无意义，这些前缀从未被支持过。
常见错误包括：给元素加 filter: Shadow() 却忘了触发 hasLayout；混用现代属性（如 transform）和 IE 滤镜导致整条 filter 规则被忽略；把 Color 写成 rgba(0,0,0,0.5)，IE 只认 #000 或 black。
- 必须触发
hasLayout：加zoom: 1、position: relative或display: inline-block -
Direction值是角度（0=正右，90=正下），不支持负值或小数 -
Strength不是模糊半径，而是阴影“拉伸长度”，建议 ≤5，否则边缘锯齿严重 - 多个滤镜要空格拼接，不能用逗号：
filter: Alpha(opacity=90) Shadow(Color=#333, Direction=135, Strength=3)
filter: drop-shadow() 不是 text-shadow 的平替，用错场景会漏影或变形
filter: drop-shadow() 作用于整个元素的 alpha 通道，不是文字像素级描边。它在 IE9+ 和现代浏览器可用，但有硬性边界条件：
- 仅适用于纯色背景 + 实心字体（无
font-feature-settings镂空、无background-clip: text） - 参数顺序不同：
drop-shadow(x y blur color)，没有spread参数 - 背景透明时，阴影会从文字轮廓外溢出，尤其在圆角或半透文字上明显失真
- 和
transform或will-change同时使用，可能触发额外合成层，移动端滚动卡顿风险上升
移动端 text-shadow 要避开 iOS Safari 12.2 以下的坑
iOS Safari 12.2 之前版本在某些 WKWebView 实例中会丢弃 text-shadow 或引发重绘异常。这不是配置问题，是底层渲染 bug。
- 安全基线写法：
text-shadow: 0 1px 2px rgba(0,0,0,0.3)—— 单层、小偏移、低模糊 - 禁用大模糊：
text-shadow: 0 0 10px #000在低端 Android 上易锯齿甚至掉帧 - 深色模式下别沿用浅色背景的阴影浓度，白色文字配
#121212背景时，建议用rgba(0,0,0,0.7)锚定 - 慎用
-webkit-font-smoothing：开启antialiased可能让阴影变淡不可见；subpixel-antialiased则让边缘发散
构建时自动检测并降级，比手写 hack 更可靠
靠人工维护多套 CSS 规则容易遗漏，尤其在组件化项目里。推荐用 PostCSS 插件做静态检查：
-
postcss-text-shadow-fallback可扫描源码，对 IE8- 场景报warning，提示改用滤镜或 PNG 替代 - 避免在 CSS 中写
* text-shadow类 hack，现代构建工具已不兼容此类语法 - 若必须支持 IE8，
text-shadow应视为“不可用特性”，直接换方案：静态 PNG 文字贴图 +aria-label保可访问性 - 多倍屏适配 PNG 贴图时，注意
image-set()在 IE 中无效，需用@media (-webkit-min-device-pixel-ratio: 2)手动切图
真正麻烦的不是怎么加阴影，而是阴影颜色没随主题动态切换——这个点，90% 的项目上线后才发现漏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
