按钮文字渐变唯一稳定方案是background-image+background-clip:text组合，因color不支持渐变值；需显式设display:inline-block、-webkit-text-fill-color:transparent等才能兼容各浏览器。
按钮文字设渐变色，不能直接用 color，必须靠 background-clip: text 把渐变背景“贴”到字形上——这是唯一稳定方案，其他写法要么无效，要么只在个别浏览器里闪一下。
为什么 color: linear-gradient() 一定不生效
因为 color 属性只接受单色值（如 #000、rgb(255,0,0)），而 linear-gradient() 返回的是 <image> 类型，浏览器直接忽略该声明。你在 DevTools 里会看到这行被划掉，控制台却没报错，容易误判为兼容性问题。
-
color: linear-gradient(to right, red, blue)是非法语法，所有现代浏览器都会跳过 - 哪怕加了
-webkit-前缀也无效——前缀解决的是属性支持，不是类型错误 - 真正起作用的是
background-image+background-clip: text这套组合
background-clip: text 在按钮上失效的常见原因
按钮元素（如 <button> 或带 role="button" 的 <div>）默认是 inline 或 inline-block，但很多框架/重置样式会把它设成 display: block，这时反而容易漏掉关键约束。
- 必须显式写
display: inline-block（哪怕父容器是 flex/grid）——inline元素不支持background-clip: text，block虽然支持，但可能因盒模型导致文字截断 - 按钮内部若用了
white-space: nowrap或text-overflow: ellipsis，会干扰裁剪区域，文字边缘可能被硬切 - 如果按钮有
border且没设box-sizing: border-box，实际内容区变小，渐变可能显示不全 - 父容器设置了
overflow: hidden（比如轮播组件的滑动容器），会把渐变文字裁掉——这不是 bug，是 CSS 盒模型正常行为
按钮文字渐变的最小可靠代码块
这段代码在 Chrome 125+、Firefox 127+、Safari 17.6+ 和 iOS Safari 17.5+ 上均能稳定渲染，不依赖 JS，也不需要 SVG。
立即学习“前端免费学习笔记（深入）”；
.btn-gradient {
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
display: inline-block;
font-weight: bold;
padding: 0.5em 1em;
}
-
background-image比background更明确，避免被后续background-color覆盖 -
-webkit-text-fill-color: transparent必须写，仅靠color: transparent在 Safari 16–17.4 中会残留灰边 - 别省略
display: inline-block——即使按钮默认是inline-block，显式声明可防 CSS 重置干扰 - 如果按钮要响应
:hover改渐变色，不要用transition: background（无效），改用两套background-image+class切换
真正容易被忽略的是：按钮文字渐变在滚动吸顶或快速切换状态时，iOS Safari 会反复光栅化背景，三色以上停靠点 + background-size: 400% 400% 组合极易掉帧。不是效果不够炫，是浏览器底层在拼命重采样。
