CSS动态文本渐变答案

【问题标题】：CSS dynamic Text gradientCSS动态文本渐变
【发布时间】：2015-03-12 23:05:13
【问题描述】：

我想渐变某些文本，我使用以下代码完成了它。问题是，

它可以在 Chrome 上运行，但不能在 Internet Explorer 上运行

另一件事 水平应用

我想要它垂直，更具体地说是 45 角位置、中心聚焦或圆形渐变

样式表：

<style>
h1 {
   font-size: 60px;
   background: -webkit-linear-gradient(RED, GREEN, BLUE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
   font-size: 18px;
   background: -webkit-linear-gradient(RED, GREEN, BLUE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>

标签：

<h1>I Want Gradient</h1>
<p>I want to apply Some Gradient<br/>ON Given Paragraph With<br/>Different angles and<br/>With Different Styles</p>

Chrome 上的结果：

在 IE 上的结果：

请帮助我，谢谢，

【问题讨论】：

在 IE8 和 IE9 上渐变为 not supported。
@chipChocolate.py 好的，我会在 IE 10 上查看，谢谢
实际上background-clip 只支持-webkit- 浏览器，所以这也行不通。我能想到的唯一选择是使用svg的渐变和mask。

标签： css styles stylesheet

【解决方案1】：

这里是 45 度角渐变：http://jsfiddle.net/swm53ran/75/

.grad1 {
    display:inline-block;
    background: -webkit-linear-gradient(45deg,red,yellow,green);
    background: linear-gradient(45deg,red,yellow,green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

【讨论】：

谢谢，角度问题也解决了，有什么办法可以让它在最流行的浏览器上运行？

【解决方案2】：

这是一个圆形渐变示例：http://jsfiddle.net/swm53ran/74/

<div>
    <h1 class="grad1">I Want Gradient</h1>
    <br/>
    <p class="grad1">I want to apply Some Gradient<br/>ON Given Paragraph With<br/>Different angles and<br/>With Different Styles</p>
</div>

.grad1 {
    display:inline-block;
    background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6 to 15 */
    background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax (must be last) */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

【讨论】：

背景剪辑在非 webkit 浏览器上不起作用