SVG内联+fill渐变是唯一能100%控制图标内部颜色渐变的方式，需将SVG代码内联、定义<linearGradient>并用fill="url(#id)"引用；mask-image+渐变背景适用于已有字体图标或单色SVG，但Safari兼容性有限。
纯 HTML 标签（<i>、<span>、<img>）本身无法直接实现渐变图标——渐变必须作用于可被 CSS 填充或裁剪的图形路径，而字体图标、外部 SVG 或 PNG 都不响应 background: linear-gradient() 这类声明。
SVG 内联 + fill 渐变（最稳、兼容性最好）
这是唯一能 100% 控制图标内部颜色渐变的方式。关键不是给容器设背景，而是把 SVG 路径的 fill 指向一个定义好的 <linearGradient>。
- 必须把 SVG 代码写进 HTML（内联），不能用
<img src="icon.svg">，否则无法注入<defs>和引用url(#id) -
<path>、<circle>等元素要显式写fill="url(#myGrad)"，不会继承父<svg>的样式 - 渐变
id必须全局唯一；多个图标共用时，建议用 JS 动态生成带哈希后缀的 ID，避免冲突 - IE11 支持，Chrome/Firefox/Edge 均无问题；Safari 从 6.1 起支持
<svg width="24" height="24" viewBox="0 0 24 24">
<defs>
<linearGradient id="starGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3b82f6"/>
<stop offset="100%" stop-color="#8b5cf6"/>
</linearGradient>
</defs>
<path fill="url(#starGrad)" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 12 2 9.27l6.91-1.01L12 2z"/>
</svg>
mask-image + 渐变背景（适合已有字体图标或单色 SVG）
当你已用 <i class="icon-star"></i> 引入 Font Awesome，或有一个 fill="#000" 的 SVG 图标，又不想改 HTML 结构时，可用 mask-image 把图标当“镂空模板”，再叠一层渐变背景透出来。
- 元素必须是
display: inline-block或block，且明确设width和height，否则 mask 无作用区域 -
mask-image必须是 alpha 有效内容：黑色/不透明部分保留，白色/透明部分被“挖空” - 渐变背景（
background-image: linear-gradient()）必须设在同一个元素上，不能靠父级背景——mask 只裁剪当前元素渲染区 - Safari 16.4+ 才支持
mask-image: linear-gradient()；旧版需 fallback 到mask-image: url(data:image/svg+xml,...)或放弃
.icon-star {
display: inline-block;
width: 24px;
height: 24px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 12 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 12 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}
background-image 直接覆盖（仅限纯色 SVG 作为背景图）
如果你的图标是单色 SVG 文件（比如导出为 icon-star.svg，内部所有 fill="#000"），可把它当背景图加载，再用 background-image 叠加渐变——但注意这不是“图标渐变”，而是“背景渐变透过图标显示”。
立即学习“前端免费学习笔记（深入）”；
- SVG 文件必须是纯黑/纯白路径，且无内联
fill覆盖（否则渐变会被遮住） - 要用
background-image: linear-gradient(), url(icon-star.svg)，逗号分隔两层，渐变在前 - 必须设
background-size: contain和background-repeat: no-repeat，否则 SVG 会平铺或拉伸变形 - 不适用于字体图标或动态颜色图标；移动端某些 WebView 对多层
background-image解析不稳定
真正容易被忽略的是：渐变图标从来不是“给图标加个渐变背景”这么简单。它要么靠 SVG 内联路径的 fill 引用渐变（可控、稳定），要么靠 mask-image 做图层合成（灵活但有 Safari 兼容断点）。任何试图对 <i> 或 <img> 直接设 background: linear-gradient() 的做法，都只会让渐变出现在图标背后，而不是图标本身。
