查看“模板:Gradient Text/doc”的源代码
←
模板:Gradient Text/doc
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于这些用户组的用户使用:
用户
,
管理员
,Editor
您没有权限编辑
模板
名字空间内的页面。
您可以查看与复制此页面的源代码。
{{info|<big><big>{{Gradient_Text|#FF0000 20%, #00FF00, #0000FF|'''实验性功能,请勿滥用'''}}</big></big><br />本模板仅在webkit内核浏览器上有效。}} == 简介 == 这是一个<s>真·</s>'''渐变颜色文字'''模板。使用CSS的<code>background-clip:text</code>属性实现的真正意义上的渐变色文字。而不是原始的一个文字一个颜色模拟出的<s>伪·</s>渐变色效果。<!-- background-clip 是 CSS3 定义的属性,但 text 并不是 CSS3 允许的属性值,也不符合这个属性的初衷。“不幸的是” background-clip:text (含带前缀的版本 -webkit-background-clip:text)目前已被主流浏览器广泛支持。 --> 由于目前的浏览器中,实现了<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>以查看效果)。 == 效果 == <big><big><big>{{Gradient_Text|#FF0000 20%, #00FF00, #0000FF|我是彩虹文字}}</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|渐变色代码|文字内容}} </nowiki></code> === 渐变色代码 === (位置)(颜色1),(颜色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|还可以直接输入角度值}} |}
该页面使用的模板:
模板:Gradient Text
(
查看源代码
)
模板:Info
(
查看源代码
)
返回至
模板:Gradient Text/doc
。
导航菜单
个人工具
创建账户
登录
命名空间
模板
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
讨论版
提问求助区
帮助
帮助
沙盒
编辑教程
创建新条目
工具
链入页面
相关更改
特殊页面
页面信息
返回顶部
评论预览
×