必须同时设置 -webkit-background-clip: text、background-clip: text、color: transparent 和 -webkit-text-fill-color: transparent，否则文字默认色会覆盖渐变；display 推荐 inline 或 inline-block；动画需用 background-position 且 background-size > 100%。
只写 background-clip: text 一定失败，必须配 -webkit-background-clip: text 和 color: transparent（或 -webkit-text-fill-color: transparent），否则文字永远是纯黑/纯白，渐变根本不会出现。
为什么文字还是黑的？——透明色没设对
浏览器把文字内容层默认画在背景层之上。background-clip: text 只是“告诉背景：你只能画在文字轮廓里”，但它不改变文字本身的颜色。如果文字颜色是默认黑色，它就会严严实实地盖住底下的渐变。
-
color: transparent在多数现代浏览器中有效，但在 Safari 15.6 之前可能被忽略 -
-webkit-text-fill-color: transparent是 WebKit 内核专属，Safari / Chrome / Edge 都认，更可靠 - 保险起见，两个都写：
color: transparent; -webkit-text-fill-color: transparent; - 别用
opacity: 0替代——它会让整个元素（包括背景）都变透明，渐变照样看不见
为什么 Safari / 旧版 Chrome 不显示渐变？——前缀漏了
background-clip: text 是标准属性，但 WebKit 内核至今没完全放开标准实现。仅写标准语法，等于没写。
- 必须同时声明：
-webkit-background-clip: text;和background-clip: text; - 顺序无关紧要，但缺一不可；
@supports检测也得写全：@supports (-webkit-background-clip: text) and (background-clip: text) - 不要写成
feature: "background-clip text"—— 这是无效语法，@supports只接受属性声明对
为什么文字区域拉得特别宽？——display 类型踩坑
background-clip: text 对 display 很敏感。块级元素（如 div、h1 默认为 block）会把裁剪区域撑满整行宽度，导致渐变铺满整行而非贴合文字本身。
- 推荐设为
display: inline;或display: inline-block; - 避免父容器有
transform或filter（尤其安卓 WebView 下，直接禁用该特性） - 如果要用
flex布局，确保子元素不是block，可加align-self: flex-start;防止换行撑开
动效做不出来？——background-size 和动画目标选错
想让渐变文字动起来（比如滑动、闪烁），不能直接 animate color（颜色已是透明），也不能只 animate background-position 而不扩大背景尺寸。
- 必须设
background-size: 200% 200%;或更大，否则位移时渐变会立刻断掉 - 动画目标应是
background-position，例如：animation: moveGradient 3s ease-in-out infinite; - 别对
text-shadow或opacity做关键帧——那不是渐变动效，只是闪烁或淡入淡出 - 注意：inline 元素上直接加
animation可能触发渲染异常，建议包一层span并设display: inline-block;
最常被忽略的是：这个效果本质依赖字体实际渲染出的字形轮廓，不是任意路径。换一个带缺口、手写感或负空间设计的字体，渐变边缘就会如实贴合那个形状——但这不是 CSS 控制的，是字体文件决定的。想改“形状”，得换字体，不是调 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
