“Template:Gallery/styles.css”与“Template:Gradient Text”：页面之间的差异
< Template:Gallery（页面间差异）
跳到导航
跳到搜索
imported>Irukaza 无编辑摘要 |
imported>850710247liu （创建页面，内容为“<noinclude>{{doc}}分類:格式模板</noinclude><includeonly><span title="{{{title|}}}" style="background:-webkit-linear-gradient({{{1}}});-webkit-background-cl…”） |
||
| 第1行： | 第1行： | ||
<noinclude>{{doc}}[[分類:格式模板]]</noinclude><includeonly><span title="{{{title|}}}" style="background:-webkit-linear-gradient({{{1}}});-webkit-background-clip:text;<!--background:linear-gradient({{{1}}});-->background-clip:text;"><span style="-webkit-text-fill-color:transparent;text-fill-color:transparent">{{{2}}}</span></span></includeonly> | |||
} | |||
2020年2月21日 (五) 18:03的版本
模板文档
实验性功能，请勿滥用
本模板仅在版本较新的浏览器上有效。
本模板仅在版本较新的浏览器上有效。
实验性功能，请勿滥用
本模板仅在版本较新的浏览器上有效。
本模板仅在版本较新的浏览器上有效。
简介
这是一个真·渐变颜色文字模板。使用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|渐变色代码|文字内容|title=鼠标悬停在文字上显示的注释}}
渐变色代码
<位置>,<颜色>,<颜色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|还可以直接输入角度值}} |
还可以直接输入角度值 |
注释文字
|title=可设置鼠标悬停在渐变颜色文字上显示的注释文字。可选参数。
| 代码 | 效果 |
|---|---|
{{Gradient_Text|left,red,blue|鼠标放在这里可以看到注释|title=我是注释}} |
鼠标放在这里可以看到注释 |