<分区>
我已经尝试了很多文字渐变。我找到了 safari 和 chrome 的代码，但它在其他浏览器中不兼容。我想让它在不使用背景图像的情况下工作。如果您有任何合适的解决方案，请提供。
<分区>
我已经尝试了很多文字渐变。我找到了 safari 和 chrome 的代码，但它在其他浏览器中不兼容。我想让它在不使用背景图像的情况下工作。如果您有任何合适的解决方案，请提供。
最佳答案
我发现最好的方法是使用 SVG 渐变，它很容易做到并且不需要任何图像，下面是一些使用 SVG 创建简单文本渐变的代码。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF6600;stop-opacity:1" />
<stop offset="100%" style="stop-coloR:#FFF000;stop-opacity:1" />
</linearGradient>
</defs>
<text fill="url(#grad1)" font-size="60" font-family="Verdana" x="50" y="100">
SVG Text Gradient</text>
</svg>您可以更改 x 和 y 值以创建水平/垂直或对 Angular 渐变，您还可以使用 CSS 样式表对其应用样式，只需在 defs 标签之间添加一行代码即可。
<link href="style.css" type="text/css" rel="stylesheet"
xmlns="http://www.w3.org/1999/xhtml"/>
此方法适用于最新版本的 Chrome、IE、Firefox 和 Safari。您还可以应用径向渐变、模糊和滤镜，有关更多信息，请访问 W3 Schools .
关于css - 在不使用背景图像的情况下，纯 css 中的跨浏览器文本渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8005447/