Question

有没有办法创建跨浏览器的纯CSS3文本颜色渐变？

所以，没有png。不仅仅是'webkit'。

编辑：更确切地说：它只是CSS3，而且是文本，而不是盒子渐变。

编辑：我找到了 this solution ，但这只适用于webkit。

Answer 1

在webkit之外没有跨浏览器方式来执行此操作，因为只有webkit目前有background-clip: text，并且this extension to background-clip不在标准轨道上（据我所知）。如果您想放宽CSS3要求，可以使用Canvas（或SVG）实现与浏览器相同的效果，但之后您只能讨论支持HTML5的浏览器。

Answer 2

目前没有“纯粹的”CSS方式，但有一种方法可以使用CSS和一些内容重复。请参阅my server side css gradient text solution here，它不需要JavaScript或普通背景。你也可以使用JavaScript来做这个客户端，看看Dragonlabs做了什么here。

Answer 3

正如我已经在zzzzBov的回复中指出的那样，有一种方法可以在CSS3中实现文本渐变。

如果你进一步采用PNG solution，你可以用css3渐变做同样的技巧。

当然，这仅适用于统一背景颜色的文本。

Answer 4

目前最好的解决方案是使用纯色作为非webkit后备，然后使用以下技术（需要webkit）：

＆＃13;

h1 {
  color: $333;
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

＆＃13;

<h1>Example</h1>

＆＃13;

纯CSS3文本颜色渐变 - 有可能吗？

4 个答案: