Template:Gradient Text/doc - 版本历史

imported>=海豚=：文本替换 - 替换“
”为“
”

2021-04-18T11:13:18Z

文本替换 - 替换“ ”为“ ”

←上一版本		2021年4月18日 (日) 19:13的版本
第1行：		第1行：
	{{info old\|<big><big>{{Gradient_Text\|#FF0000 20%, #00FF00, #0000FF\|'''实验性功能，请勿滥用'''}}</big></big><br>本模板仅在版本较新的浏览器上有效。\|type=none}}		{{info old\|<big><big>{{Gradient_Text\|#FF0000 20%, #00FF00, #0000FF\|'''实验性功能，请勿滥用'''}}</big></big><br/>本模板仅在版本较新的浏览器上有效。\|type=none}}

	== 简介 ==		== 简介 ==

imported>=海豚=：文本替换 - 替换“
”为“
”

2020-06-11T07:40:32Z

文本替换 - 替换“ ”为“ ”

←上一版本		2020年6月11日 (四) 15:40的版本
第1行：		第1行：
	{{info old\|<big><big>{{Gradient_Text\|#FF0000 20%, #00FF00, #0000FF\|'''实验性功能，请勿滥用'''}}</big></big><br />本模板仅在版本较新的浏览器上有效。\|type=none}}		{{info old\|<big><big>{{Gradient_Text\|#FF0000 20%, #00FF00, #0000FF\|'''实验性功能，请勿滥用'''}}</big></big><br>本模板仅在版本较新的浏览器上有效。\|type=none}}

	== 简介 ==		== 简介 ==

imported>=海豚=：文本替换 - 替换“{{info”为“{{info old”

2020-05-18T15:20:08Z

文本替换 - 替换“{{info”为“{{info old”

←上一版本		2020年5月18日 (一) 23:20的版本
第1行：		第1行：
	{{info\|<big><big>{{Gradient_Text\|#FF0000 20%, #00FF00, #0000FF\|'''实验性功能，请勿滥用'''}}</big></big><br />本模板仅在版本较新的浏览器上有效。\|type=none}}		{{info old\|<big><big>{{Gradient_Text\|#FF0000 20%, #00FF00, #0000FF\|'''实验性功能，请勿滥用'''}}</big></big><br />本模板仅在版本较新的浏览器上有效。\|type=none}}

	== 简介 ==		== 简介 ==

imported>=海豚=：文本替换 - 替换“[[Category:”为“[[分类:”

2020-04-05T02:10:06Z

文本替换 - 替换“[[Category:”为“[[分类:”

←上一版本		2020年4月5日 (日) 10:10的版本
第78行：		第78行：
	\|<code><nowiki>{{Gradient_Text\|left,red,blue\|鼠标放在这里可以看到注释\|title=我是注释}}</nowiki></code>\|\|{{Gradient_Text\|left,red,blue\|鼠标放在这里可以看到注释\|title=我是注释}}		\|<code><nowiki>{{Gradient_Text\|left,red,blue\|鼠标放在这里可以看到注释\|title=我是注释}}</nowiki></code>\|\|{{Gradient_Text\|left,red,blue\|鼠标放在这里可以看到注释\|title=我是注释}}
	\|}		\|}
	<noinclude>[[~~Category~~:模板说明文件]]</noinclude>		<noinclude>[[分类:模板说明文件]]</noinclude>

imported>850710247liu：创建页面，内容为“{{info|{{Gradient_Text|#FF0000 20%, #00FF00, #0000FF|'''实验性功能，请勿滥用'''}}
本模板仅在版本较新的浏览器上有…”

2020-02-21T10:03:49Z

创建页面，内容为“{{info|<big><big>{{Gradient_Text|#FF0000 20%, #00FF00, #0000FF|'''实验性功能，请勿滥用'''}}</big></big> 本模板仅在版本较新的浏览器上有…”

新页面

{{info|<big><big>{{Gradient_Text|#FF0000 20%, #00FF00, #0000FF|'''实验性功能，请勿滥用'''}}</big></big> 本模板仅在版本较新的浏览器上有效。|type=none}}

== 简介 ==

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

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

参考：[https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip background-clip | MDN]

== 效果 ==

<big><big><big>{{Gradient_Text|red 20%, orange, yellow, lime, aqua, blue, purple, fuchsia|我是彩虹文字}}</big></big></big>
<big><big><big>{{Gradient_Text|#FFE500, #FF9900, #CC0099|我是柔和的渐变色文字}}</big></big></big>

<big><big><big>{{Gradient_Text|right,#FFE500 20%, #FF9900, #CC0099|横着渐变也可以哦}}</big></big></big>

== 用法 ==

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

=== 渐变色代码 ===

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

*说明：

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

==== 简单的渐变 ====

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

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

{|class="wikitable" style="border:1px #999 solid;"
!代码||效果
|-
|<code><nowiki>{{Gradient_Text|red,blue|我是渐变色文字}}</nowiki></code>||{{Gradient_Text|red,blue|我是渐变色文字}}
|-
|<code><nowiki>{{Gradient_Text|red,orange,yellow,green,cyan,blue,purple|更多的颜色也可以}}</nowiki></code>||{{Gradient_Text|red,orange,yellow,green,cyan,blue,purple|更多的颜色也可以}}
|}

==== 控制位置 ====

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

{|class="wikitable" style="border:1px #999 solid;"
!代码||效果
|-
|<code><nowiki>{{Gradient_Text|red 50%,blue|我是渐变色文字}}</nowiki></code>||{{Gradient_Text|red 50%,blue|我是渐变色文字}}
|}

==== 控制方向 ====

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

{|class="wikitable" style="border:1px #999 solid;"
!代码||效果
|-
|<code><nowiki>{{Gradient_Text|left,red,blue|我是渐变色文字}}</nowiki></code>||{{Gradient_Text|left,red,blue|我是渐变色文字}}
|-
|<code><nowiki>{{Gradient_Text|top left,red,blue|这样是斜向的渐变}}</nowiki></code>||{{Gradient_Text|top left,red,blue|这样是斜向的渐变}}
|-
|<code><nowiki>{{Gradient_Text|60deg,red,blue|还可以直接输入角度值}}</nowiki></code>||{{Gradient_Text|60deg,red,blue|还可以直接输入角度值}}
|}

==== 注释文字 ====

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

{|class="wikitable" style="border:1px #999 solid;"
!代码||效果
|-
|<code><nowiki>{{Gradient_Text|left,red,blue|鼠标放在这里可以看到注释|title=我是注释}}</nowiki></code>||{{Gradient_Text|left,red,blue|鼠标放在这里可以看到注释|title=我是注释}}
|}
<noinclude>[[Category:模板说明文件]]</noinclude>

Template:Gradient Text/doc - 版本历史

imported>=海豚=：​文本替换 - 替换“”为“”

imported>=海豚=：​文本替换 - 替换“”为“”

imported>=海豚=：​文本替换 - 替换“{{info”为“{{info old”

imported>=海豚=：​文本替换 - 替换“[[Category:”为“[[分类:”

imported>850710247liu：​创建页面，内容为“{{info|{{Gradient_Text|#FF0000 20%, #00FF00, #0000FF|'''实验性功能，请勿滥用'''}}本模板仅在版本较新的浏览器上有…”

imported>=海豚=：文本替换 - 替换“
”为“
”

imported>=海豚=：文本替换 - 替换“
”为“
”

imported>=海豚=：文本替换 - 替换“{{info”为“{{info old”

imported>=海豚=：文本替换 - 替换“[[Category:”为“[[分类:”

imported>850710247liu：创建页面，内容为“{{info|{{Gradient_Text|#FF0000 20%, #00FF00, #0000FF|'''实验性功能，请勿滥用'''}}
本模板仅在版本较新的浏览器上有…”