text-shadow对表格数字无效是因为它只作用于文本内容所在元素（如td、th、span），而非table或tr；需将样式加在td/th等内联文本容器上，并针对小字号控制blur-radius≤1px，多层阴影不超过两层。
text-shadow 对表格数字无效？先确认作用对象
直接给 <table> 或 <code><tr> 写 <code>text-shadow 是无效的——它只作用于**文本内容所在的元素**，比如 <td>、<code><th> 或其内部的 <code><span></span>。表格本身不渲染文字，阴影自然不会出现。
常见错误是把样式写在 table 上，结果调试半天没效果。真正该加的地方是：
-
td, th：最常用，覆盖所有单元格 -
td.number, th.number：仅对含数字的单元格生效（推荐） -
td span.digit：如果数字被包裹在<span></span>里，且需要独立控制（如数码管风格）
小字号数字加 shadow 容易糊？控制 blur-radius 是关键
表格里数字常为 12–14px，盲目套用标题级参数（如 0 0 6px rgba(0,0,0,0.4)）会导致笔画粘连、边缘发虚，尤其在中文或等宽字体下更明显。
实操建议：
- 12px 及以下：blur-radius ≤
1px，优先用0 0 0 rgba(0,0,0,0.5)压实轮廓 - 14–16px：可叠加第二层，如
0 0 0 rgba(0,0,0,0.6), 1px 1px 1px rgba(0,0,0,0.15) - 避免用
#000或#fff纯色——深底配rgba(0,0,0,0.6)，浅底配rgba(0,0,0,0.3) - Mac Safari 下 -webkit-font-smoothing: antialiased 会削弱对比，必要时加
-webkit-text-stroke: 0.5px rgba(0,0,0,0.1)辅助
多层 text-shadow 在表格里要不要用？看场景别堆砌
两层足够解决 95% 的表格数字可读性问题；三层及以上不仅视觉难分辨，还会在低端设备上触发渲染卡顿，尤其配合 overflow: hidden 的紧凑表格布局时。
典型有效组合：
- 深色背景（如
#2c3e50）+ 白字：text-shadow: 0 0 0 rgba(0,0,0,0.7), 0 1px 1px rgba(0,0,0,0.2); - 浅色背景 + 深灰数字（
#34495e）：text-shadow: 0 0 0 rgba(255,255,255,0.8);（单层压实即可） - 强调型数字（如增长百分比）：
text-shadow: 0 0 3px rgba(46,204,113,0.5);（轻量辉光，慎用于整列）
注意：text-shadow 值之间必须用英文逗号分隔，漏掉逗号等于只生效第一个。
为什么同一段 CSS 在表格里看起来“变淡”了？检查 color 和 background 叠加
表格单元格常设 background-color，而 text-shadow 的颜色会和背景混合。例如浅灰文字 color: #95a5a6 加 rgba(0,0,0,0.3) 阴影，在白色背景上几乎不可见。
排查要点：
- 用浏览器开发者工具检查实际计算出的
color和background-color值 - 避免依赖继承色，显式声明
td { color: #2c3e50; } - 若单元格有半透明背景（如
rgba(255,255,255,0.9)），阴影需提高 alpha 值（如rgba(0,0,0,0.45)）来补偿 - 不要在
th上用太重的阴影——表头通常已加粗，过重阴影反而降低扫描效率
真正容易被忽略的是：表格行高（line-height）过小会压缩文字垂直空间，导致阴影被裁切；确保 td, th 至少有 line-height: 1.4 以上余量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
