模板:Gradient Text/doc

实验性功能，请勿滥用
本模板仅在webkit内核浏览器上有效。

简介

这是一个真·渐变颜色文字模板。使用CSS的background-clip:text属性实现的真正意义上的渐变色文字。而不是原始的一个文字一个颜色模拟出的伪·渐变色效果。

由于目前的浏览器中，实现了background-clip:text属性的只有Edge和Webkit内核（Chrome，Safari，Android自带浏览器，国产双核浏览器的极速内核）的浏览器可以解析并显示出效果。IE、Firefox 49以下显示效果则是还原为原始的黑色字（Firefox 48可以打开about:config，把layout.css.background-clip-text.enabled和layout.css.prefixes.webkit改为true以查看效果）。

效果

我是彩虹文字我是柔和的渐变色文字

横着渐变也可以哦

用法

{{Gradient_Text|渐变色代码|文字内容}}

渐变色代码

（位置）（颜色1）,（颜色2）, ...

说明：

渐变色代码由若干个以逗号分隔的颜色（名称或16进制代码）组成
位置为可选参数，可以填角度或者方位。

简单的渐变

要确定一个渐变色，至少需要两个颜色。

最简单的渐变色代码就是将两个或者两个以上的颜色用逗号（英文半角）连接起来

代码	效果
`{{Gradient_Text\|red,blue\|我是渐变色文字}}`	我是渐变色文字
`{{Gradient_Text\|red,orange,yellow,green,cyan,blue,purple\|更多的颜色也可以}}`	更多的颜色也可以

控制位置

如果觉得上面的红色的位置太小，你可以在颜色后面加一个表示位置的百分比数字，这个在这个百分比的点上就会是这种颜色了。

代码	效果
`{{Gradient_Text\|red 50%,blue\|我是渐变色文字}}`	我是渐变色文字

控制方向

在颜色前面加上一个限定方向的词就可以控制渐变色的方向。

代码	效果
`{{Gradient_Text\|left,red,blue\|我是渐变色文字}}`	我是渐变色文字
`{{Gradient_Text\|top left,red,blue\|这样是斜向的渐变}}`	这样是斜向的渐变
`{{Gradient_Text\|60deg,red,blue\|还可以直接输入角度值}}`	还可以直接输入角度值