color属性不支持渐变，必须用background-clip: text配合color: transparent和-webkit-text-fill-color: transparent；需注意语法规范、兼容性前缀及降级方案。
为什么直接写 color: linear-gradient() 不生效
CSS 的 color 属性只接受单色值（如 #ff0000、rgb(255,0,0)），不支持渐变函数。试图写成 color: linear-gradient(...) 会被浏览器忽略，文字仍显示为默认黑色或继承色。
background-clip: text 必须配合 color: transparent
这是最容易漏掉的关键组合：如果只设 background-image 和 -webkit-background-clip: text，但没把文字本身设为透明，原始文字颜色会完全盖住背景渐变。
-
color: transparent是必需的，不是可选优化 -
-webkit-text-fill-color: transparent要额外加上，否则 Safari 中文字可能恢复为黑色 - 字体必须有足够对比度——背景渐变若太淡，透明文字在浅底色上会看不清
渐变方向与色标写法差异影响效果
linear-gradient() 的角度语法容易混淆：数值单位是 deg，关键词是 to left 这类，二者不能混用。
-
linear-gradient(90deg, #ff0000, #00ff00)→ 从下到上（垂直） -
linear-gradient(to right, #ff0000, #00ff00)→ 从左到右（水平） - 多个色标建议加位置百分比，比如
#ff0000 0%, #ff7300 50%, #00ff00 100%，避免浏览器自动均分导致偏色 - 径向渐变用
radial-gradient(circle, ...)，circle比默认ellipse更可控
Firefox 和旧版 Edge 的兼容性坑
Firefox 直到 v123 才正式支持无前缀的 background-clip: text，而 Safari 仍依赖 -webkit-background-clip。不加前缀或只加一半，效果在某些设备上直接消失。
- 必须同时写
-webkit-background-clip: text和background-clip: text - 不要省略
-webkit-text-fill-color: transparent，尤其在 iOS Safari 上 - 降级方案建议用
@supports (background-clip: text)包裹样式，否则老浏览器里文字会变成全透明不可见 - 真要保底，可在父元素加
color: #333，再用@supports覆盖它
实际项目里最常出问题的不是写法错，而是漏掉 color: transparent 或忘了 WebKit 前缀——这两个点一错，整个效果就“看不见”，但控制台又不报错，调试时容易绕远路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
