background-clip: text 实现彩虹文字需同时声明 -webkit-background-clip: text、color: transparent，并设 display: inline/inline-block；Firefox 不支持该特性，须用 @supports 降级；动画需配 background-size >100% 且避免 repeating-linear-gradient。
直接用 background-clip: text 做彩虹文字，不加 -webkit-background-clip: text 和 color: transparent（或 -webkit-text-fill-color: transparent），99% 的情况会显示为纯黑/纯白字——不是代码写错了，是浏览器根本没执行裁剪。
为什么写了 background-clip: text 却没效果
最常踩的坑就三个：
-
background-clip: text在 Chrome、Edge、Safari 中必须搭配-webkit-background-clip: text才生效；标准属性单独写等于没写 -
color: transparent漏了，或者误写成color: rgba(0,0,0,0)—— 只有transparent被所有支持浏览器识别为“让文字区域透出背景” - 元素是
<div>默认display: block，而background-clip: text只对内联盒有效；得显式设display: inline或display: inline-block
怎么写出真正流动的彩虹文字
光有渐变不够，动画卡顿或跳变，多半是 background-size 没配对：
- 必须写
background-size: 200% 200%（或至少 >100%），否则background-position动画会直接拉满再跳回起点 - 渐变色标建议 6–7 个，按光谱顺序排列，比如：
linear-gradient(45deg, #ff0000, #ff9900, #ffff00, #00ff00, #00ffff, #0000ff, #9900ff) - 别用
repeating-linear-gradient：在 Windows + Chrome 下小字号易断层，尤其font-size < 24px时 - 动画时间别太短，
animation: slide-bg 8s linear infinite比 2s 更平滑，人眼也更容易感知流动感
Firefox 用户看到空白？这是设计使然
截至 Firefox v128（2026年4月），background-clip: text 仍无任何前缀或替代方案支持。它不会报错，也不会 fallback，就是静默失效——文字变成 color: transparent 后彻底不可见。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
靠谱做法只有一种：
- 先写降级色：
color: #333（放最前面） - 再用
@supports (background-clip: text)包裹整套渐变逻辑，确保仅在支持浏览器中覆盖 - 别信
CSS.supports('background-clip', 'text')的 JS 检测能兜底——它在 Firefox 返回false，但你没法靠它自动补上样式，因为 DOM 已渲染完毕
高对比度模式和 Retina 屏下的隐形陷阱
两个容易被忽略但真实存在的问题：
- 开启系统高对比度模式（如 Windows 的“高对比度主题”或 macOS 的“增加对比度”）后，
color: transparent会被强制重置为实色，但渐变背景可能被禁用——结果是彩色字变黑字，且无渐变；必须加@media (forced-colors: active) { color: CanvasText; } - 在 Retina 屏或非整数缩放（如 125%）下，多色过渡边缘发虚是采样导致的，不是 bug；加
backface-visibility: hidden或transform: translateZ(0)有时能缓解，但不保证有效
