rt元素加text-shadow失效的根本原因是浏览器对ruby布局中rt的渲染不保证继承文本样式，且其小字号、溢出裁剪及引擎支持差异导致阴影不可见。
ruby 标签本身不渲染阴影，text-shadow 无法直接作用于 rt（注音）内容——因为多数浏览器会把 rt 当作匿名内联盒子处理，且其渲染层级受 ruby 布局模型限制；强行加 text-shadow 往往只在部分 Chrome 版本生效，Safari 和 Firefox 下基本不可见。
为什么 rt 元素加 text-shadow 大概率失效
根本原因不是写法错，而是规范与实现脱节：ruby 是语义化内联结构，浏览器对其内部 rt 的渲染不保证继承父级文本样式。即使你给 ruby 或 rt 显式声明 text-shadow，以下情况仍会导致“没效果”：
-
rt默认font-size极小（常为 50%~60%），而text-shadow的blur-radius在小字号下极易被裁剪或视觉淹没 - 父容器设置了
overflow: hidden或line-height过紧，rt的阴影区域超出盒模型边界后被裁掉 - Safari 对
ruby内部元素的text-shadow支持为 partial，仅对rb（基字）有效，rt被忽略 - 某些 Android WebView 完全不触发
rt的文本阴影重绘，连transform: translateZ(0)强制 GPU 加速都无效
真正能用的替代方案：用 span 模拟 ruby 结构
放弃原生 ruby 标签，改用语义等价但可控性更强的布局，是目前最稳妥的路径。核心思路是：用 display: ruby 手动还原结构，再对每个子元素独立控制阴影。
- 把
<ruby><rb>漢</rb><rt>かん</rt></ruby>改写为<span class="ruby"><span class="rb">漢</span><span class="rt">かん</span></span> - CSS 中启用现代 ruby 模式：
.ruby { display: ruby; }（Chrome 120+、Safari 17.4+、Firefox 128+ 支持） - 单独给
.rt加阴影：.rt { text-shadow: 0 0 2px rgba(255, 107, 107, 0.8); font-size: 0.6em; } - 若需兼容旧版浏览器，退化为
position: relative / absolute模拟：给.ruby设position: relative，.rt设position: absolute; top: -0.8em; left: 0;，再加text-shadow
filter: drop-shadow() 对 ruby 容器无效？试试包裹一层
drop-shadow() 依赖图像合成，它只对“最终渲染出的像素轮廓”起作用。原生 ruby 元素在计算轮廓时通常不包含 rt 区域（因其为浮动定位），所以直接加 filter 没反应。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：在外层套一个
span或div，设display: inline-block+vertical-align: top，再对其应用filter: drop-shadow(0 -2px 3px rgba(255, 107, 107, 0.7)) - 注意：该阴影是整体投射，不能只罩住
rt；若要高光感，得叠加两层filter（目前无浏览器支持多filter链式调用，需用伪元素模拟） - 性能提示：每多一层
filter就多一次离屏渲染，移动端慎用；实测 iOS Safari 在ruby上启用drop-shadow后，滚动帧率下降约 15%
真正麻烦的是：哪怕你用 span + display: ruby 实现了阴影，不同浏览器对 ruby-position: over 的解析仍有偏差——Chrome 把 rt 顶到基字上方 0.3em，Firefox 是 0.45em，Safari 是 0.25em。阴影位置必须按浏览器做微调，没法一套 CSS 通吃。
