单行渐变文本需 background-clip: text + color: transparent + display: inline/inline-block + 双前缀；多行必须加 box-decoration-break: clone（含 -webkit- 前缀）且禁用 overflow: hidden、rem line-height 等干扰项。
单行渐变文本用 background-clip: text + color: transparent 就够了；多行必须加 box-decoration-break: clone，否则每行渐变起始位置错乱——这是最常被忽略的硬性条件。
单行渐变文本：为什么直接写会失效
很多人复制粘贴三行代码就跑，结果在 Safari 15.4+ 或旧 Edge 里文字变黑、无渐变。根本原因不是渐变写错了，而是：background-clip: text 要求元素必须是内联级（或显式设 display: inline），且不能有 padding 或 border 干扰剪裁边界。
-
display: block的p或h2默认不生效，得加display: inline或display: inline-block -
line-height和font-size不匹配时，background-image渐变区域可能被裁掉顶部/底部，导致颜色断层 - 必须显式声明
-webkit-background-clip: text，仅写标准属性在 Safari 旧版中静默失败 - 渐变方向用
to right最稳；用角度如135deg时，单行没问题，但多行会因换行重置起点——这正是多行要单独处理的原因
多行渐变文本：box-decoration-break: clone 不是可选项
不加 box-decoration-break: clone，浏览器会把整个段落当一个块渲染渐变，第二行开始的渐变坐标从第一行末尾继续算，导致每行颜色偏移、深浅不一。加了之后，每行才真正“独立拥有”自己的渐变起始点。
- 必须同时写
-webkit-box-decoration-break: clone和box-decoration-break: clone，Safari 16.4 之前只认前者 - 父容器不能设
overflow: hidden，否则clone模式下部分行可能被意外裁切 -
line-height必须是数值（如1.4）或em，禁用rem—— 否则box-decoration-break在 Firefox 中高度计算失准 - 中文段落慎用
word-break: break-all强制换行，它会让clone模式下每行宽度突变，渐变拉伸变形
SCSS 混合宏封装：分离单行/多行逻辑，别混用
一个 @mixin text-gradient() 试图同时覆盖单行和多行，最后必然在某个浏览器里崩。正确做法是拆成两个明确用途的混合宏，并强制传入关键参数。
立即学习“前端免费学习笔记（深入）”；
-
@mixin text-gradient-inline($gradient)：专用于单行，自动加display: inline和双前缀background-clip -
@mixin text-gradient-lines($gradient, $lines: 2)：专用于多行，内置box-decoration-break双前缀 +line-clamp降级兼容（需配合@supports） - 渐变值必须由
@function gradient($dir, $stops)返回，不能在 mixin 里拼字符串——否则用在mask-image或动画background-position时直接报错 - 调用时必须显式传
$gradient，例如@include text-gradient-lines(gradient(to right, #ff6b6b, #4ecdc4))，不传就编译失败，避免漏配置
Firefox 和旧 Safari 的降级 fallback 怎么写
Firefox 一直不支持 background-clip: text，Safari 15.2 以下对 box-decoration-break 支持极差。不能靠 UA 判断，得用 @supports 精准检测。
-
@supports (background-clip: text) and (-webkit-background-clip: text)→ 单行渐变生效 -
@supports (box-decoration-break: clone) or (-webkit-box-decoration-break: clone)→ 多行渐变生效 - 降级方案里，
color必须设为渐变起始色（如#ff6b6b），不能留默认黑色，否则白底页面上文字看不见 - 不要试图用
filter: drop-shadow()模拟渐变——它模糊、耗性能，且无法控制每行独立效果
真正难的不是写出能跑的代码，而是让 box-decoration-break: clone 在各种 line-height、font-family、letter-spacing 组合下都保持每行渐变连续。这需要实机测 iOS Safari、Android Chrome、Firefox Desktop 三个环境，光看 DevTools 的 computed 样式不够。
