模板:Gradient Text：修订间差异

2025年2月8日 (六) 01:40的最新版本

这个文档嵌入自模板:Gradient Text/doc。

本段内容来自萌娘百科 https://zh.moegirl.org.cn/ 感谢贡献！

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

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

横着渐变也可以哦

{{Gradient_Text|渐变色代码|文字内容|title=鼠标悬停在文字上显示的注释}}

<位置>,<颜色>,<颜色2>, ...

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

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

代码	效果
`{{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\|还可以直接输入角度值}}`	还可以直接输入角度值

|title=可设置鼠标悬停在渐变颜色文字上显示的注释文字。可选参数。

代码	效果
`{{Gradient_Text\|left,red,blue\|鼠标放在这里可以看到注释\|title=我是注释}}`	鼠标放在这里可以看到注释

2025年2月7日 (五) 04:35的版本查看源代码 Comvan（留言 \| 贡献）行政员、界面管理员、管理员 605次编辑创建页面，内容为“<includeonly><span title="{{{title\|}}}" style="background:-webkit-linear-gradient({{{1}}});background:linear-gradient({{{1}}});-webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:{{{break\|clone}}};box-decoration-break:{{{break\|}}};-webkit-text-fill-color:transparent;text-fill-color:transparent">{{{2}}}</span></includeonly>”		2025年2月8日 (六) 01:40的最新版本查看源代码 Comvan（留言 \| 贡献）行政员、界面管理员、管理员 605次编辑无编辑摘要
第1行：		第1行：
	<includeonly><span title="{{{title\|}}}" style="background:-webkit-linear-gradient({{{1}}});background:linear-gradient({{{1}}});-webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:{{{break\|clone}}};box-decoration-break:{{{break\|}}};-webkit-text-fill-color:transparent;text-fill-color:transparent">{{{2}}}</span></includeonly>		<noinclude>{{doc}}</noinclude><includeonly><span title="{{{title\|}}}" style="background:-webkit-linear-gradient({{{1}}});background:linear-gradient({{{1}}});-webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:{{{break\|clone}}};box-decoration-break:{{{break\|}}};-webkit-text-fill-color:transparent;text-fill-color:transparent">{{{2}}}</span></includeonly>