css - 创建文本渐变时，移动设备上出现奇怪的渐变出血

Question

我一直在创建 css3 文本渐变。它们可以在浏览器中完美找到，但是当您在网络上查看它们时。文本周围总是有一条线或一个框。类似于此页面上发生的情况：http: //www.paulund.co.uk/playground/demo/css_text_gradient/

这是一个 webkit 错误吗？

Answer 1

感谢 Michael 的建议，使用 svg bg 而非 css3 生成的解决了移动问题。

这是css的代码：

background:url(../img/grad.svg) 0 -116px;
background-size: 100% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

然后是 grad.svg：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60">
  <linearGradient id="normal" x1="0%" y1="0%" x2="0%" y2="100%">
     <stop offset="0%" stop-color="#ffffff"/>
     <stop offset="100%" stop-color="#000000"/>
  </linearGradient>
  <rect x="0" y="0" width="100%" height="60" fill="url(#normal)" />
</svg>