/* 设置文字渐变效果 */ .gradient-text { background: -webkit-linear-gradient(left, red, yellow, green); /* Safari 5.1 - 6.0 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
在上面的代码中,大家通过为文字添加背景渐变来实现渐变效果,具体步骤如下:
- 选择一个文字元素,如:
<h1>
、<p>
等。 - 为该元素添加渐变背景,可以通过CSS3的渐变属性实现,如:
background: -webkit-linear-gradient(left, red, yellow, green);
。 - 使用
-webkit-background-clip: text;
属性让文字只显示在背景渐变的部分。 - 使用
-webkit-text-fill-color: transparent;
属性让文字变为透明。
这样就可以实现文字渐变效果了,例如下面的示例:
<h1 class="gradient-text">Hello World!</h1>