ruby标签不支持对整体注音结构应用css渐变色，因rt与基文本分属不同渲染层，只能分别设置颜色；若需渐变效果，须放弃语义化ruby，改用定位模拟，但将丧失屏幕阅读器支持与无障碍合规性。
ruby 标签本身不支持 CSS 渐变色
直接对 ruby 元素设置 background: linear-gradient(...) 或 color: ... 无法实现「注音文字 + 基文本」整体渐变，因为 ruby 是一个语义容器，浏览器默认将其渲染为行内块组合，且内部 rt（注音）和基文本（如汉字）处于不同层、不同盒模型中，CSS 无法跨层级统一着色或应用渐变背景。
只能分别控制 rt 和基文本的颜色
实际能生效的是对子元素单独设置颜色或渐变：
-
ruby本身设color不影响rt，只作用于未包裹在rt中的纯文本（极少用） -
rt可设color、background，但不能设background-image: linear-gradient()—— 因为rt默认是 inline 元素，而渐变背景需块级上下文才能可靠铺开 - 基文本（如
ruby内的汉字）可设color，但无法与rt同步做“从红到蓝”的连续渐变过渡
示例可行写法：
<ruby style="color: #333;"> 汉<rt style="color: #f00; font-size: 0.6em;">hàn</rt></ruby>
想模拟“渐变效果”得绕开 ruby 的语义结构
如果真实需求是让「汉字 + 上方拼音」整体呈现视觉渐变（比如从左到右由蓝变红），必须放弃原生 ruby，改用定位模拟：
- 用
span包汉字，再用绝对定位的span模拟rt，两者共用同一父容器 - 给父容器设
position: relative，内部子元素设display: inline-block或inline-flex - 对父容器设渐变背景，再用
background-clip: text+-webkit-text-fill-color: transparent实现文字渐变（仅限基文本；rt需单独处理） - 注意：这样会丢失无障碍支持（
ruby被屏幕阅读器识别为发音注解，自定义结构需手动加aria-label）
兼容性和可访问性代价常被低估
用 ruby 的核心价值在于语义正确与读屏支持。一旦为视觉效果强行 hack，就等于主动放弃 WCAG AA 级别中对东亚语言注音的可访问性要求。真正需要渐变色的场景，通常更适合用 SVG 文字或 Canvas 渲染——但那就完全脱离 HTML 语义了。别为了一个颜色效果，把注音变成“装饰性图片”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
