必须用 background-clip: text + color: transparent 和 -webkit-text-fill-color: transparent 组合实现文字渐变，inline 元素需设 display: inline-block，且须避免 overflow: hidden、旧版 Safari 兼容及性能陷阱。
直接用 color 设不了渐变色，必须靠背景裁剪 + 透明文字组合实现，否则浏览器会忽略或回退为纯色。
为什么 background-clip: text 不生效
最常见原因是元素没渲染出盒模型：inline 元素（如 <span>）默认不支持 background-clip: text，必须加 display: inline-block 或 block；伪元素还必须写 content: ""，否则压根不生成节点。
- 检查是否漏了
display: inline-block（inline元素即使写了background-clip也无效） - 确认没有父容器设置了
overflow: hidden且裁剪了子元素内容区域 - 避免在 Flex/Grid 容器中直接对文字设
background-clip，某些旧版 Safari 会丢弃裁剪效果 - 移动端 iOS Safari 15.4 之前版本不支持无前缀的
background-clip: text，必须保留-webkit-background-clip: text
color: transparent 和 -webkit-text-fill-color: transparent 要不要都写
都要写。仅靠 color: transparent 在部分 Chrome 版本和所有 Safari 中无法完全隐藏文字笔画，残留灰边或填充色；-webkit-text-fill-color 是实际控制文字“墨水”是否显示的关键属性，它优先级高于 color，但只被 WebKit 内核识别。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须同时声明：
color: transparent（标准回退） +-webkit-text-fill-color: transparent（强制抹除文字填充） - 别用
text-fill-color（无前缀），它不是标准属性，现代浏览器全都不认 - 如果父容器有深色背景，记得给文字加
background-color: transparent，否则可能透出父背景干扰渐变
渐变方向写 to bottom 还是 180deg？
两者等价，但写法影响可维护性与兼容性。推荐统一用角度值（如 180deg），因为：
立即学习“前端免费学习笔记（深入）”；
-
to top/to bottom在旧版 Safari（iOS 11–12）中解析不稳定，偶发方向翻转 - 动画时用角度更易控制插值，比如配合
@keyframes动态改background-position或--grad-angle - 多色停靠点带百分比（如
red 20%, blue 80%）时，角度写法语义更清晰，不易误判起始端 - 注意：不要混用，
linear-gradient(to bottom, red, blue)和linear-gradient(180deg, red, blue)效果一致，但前者在极少数 Android WebView 中有偏移 bug
真正容易被忽略的是性能陷阱：iOS Safari 滚动时重绘 linear-gradient 背景会触发光栅化，若文字在吸顶栏或轮播图标题里，频繁滚动就掉帧。简化方案不是删渐变，而是把三色以上停靠点压到 2–3 个，并禁用 background-size: 400% 400% 这类放大型动画参数——它们会让浏览器持续重采样，而不是复用缓存纹理。
