“模板:Gradient Text/doc”的版本间的差异

来自维阿百科
跳转至： 导航、 搜索
1.38>牛腩面
（创建页面，内容为“{{info|<big><big>{{Gradient_Text|#FF0000 20%, #00FF00, #0000FF|'''实验性功能，请勿滥用'''|break=clone}}</big></big><br />本模板仅在版本较新的浏览器上有效。|type=none}} == 简介 == 这是一个<s>…）
 
 
（未显示同一用户的1个中间版本）
第1行： 第1行：
 +
{{FromOther/CN|site=萌娘百科|originURL=https://zh.moegirl.org.cn/{{FULLPAGENAMEE}}|origin={{FULLPAGENAME}}|copyright=cc|lsubtype=by-nc-sa|lver=3.0|contribURL=https://zh.moegirl.org.cn/index.php?title={{FULLPAGENAMEE}}&action=history}}
 
{{info|<big><big>{{Gradient_Text|#FF0000 20%, #00FF00, #0000FF|'''实验性功能，请勿滥用'''|break=clone}}</big></big><br />本模板仅在版本较新的浏览器上有效。|type=none}}
 
{{info|<big><big>{{Gradient_Text|#FF0000 20%, #00FF00, #0000FF|'''实验性功能，请勿滥用'''|break=clone}}</big></big><br />本模板仅在版本较新的浏览器上有效。|type=none}}
  

2024年1月3日 (三) 18:56的最新版本

Other Wiki 本页面之全部或部分原来自萌娘百科的模板:Gradient Text/doc，依 CC BY-NC-SA 3.0 CN 授权引入；原贡献者可以在这里看到。经过双方编者的修改，本页面可能已与来源有很大差异。
Icon-info.png
实验性功能，请勿滥用
本模板仅在版本较新的浏览器上有效。

简介

这是一个真·渐变颜色文字模板。使用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以查看效果）。

参考：background-clip | MDN

效果

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

横着渐变也可以哦

用法

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

渐变色代码

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

  • 说明：
  1. 渐变色代码由若干个以逗号分隔的颜色（名称或16进制代码）组成。
  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=我是注释}} 鼠标放在这里可以看到注释
 
查 ·论 ·编
格式模板
排版
元素浮动
浮动{{Float}} • 清除浮动{{Clear}} • 修改浮动方向{{Clear2}} • 多行{{Stack}}{{Stack begin}}{{Stack end}} • Flex{{flex}}
分栏
内联{{Columns-list}} • 多行{{Multicol}}{{Multicol-break}}{{Multicol-end}}
对齐
向下对齐{{Bottom}} • 水平居中{{Center}}
特殊字符
文字连接符{{Wj}}/&#x2060; • 零宽空格{{Zwsp}}/&#x200B; • 不换行空格{{Nbsp}}/&nbsp;
表格
书写方向
修改书写方向{{Writing-mode}} • 竖排文本{{VText}} • 竖排页面{{Tategaki}} • 镜像文本{{镜像}}
悬停效果
{{Moe-hover}} • {{Hover}} • {{HoverInline}} • {{Hovers}} • {{TextHover}} • {{PicHover}}
颜色
文字颜色
标准{{Color}} • 链接{{Coloredlink}} • 颜色计算{{ColorOps}} • 带颜色的日文{{Cj}}
背景颜色
文字及背景颜色
{{Color2}} • 自动化彩幕{{彩幕}} • {{高亮文字}}
交叉颜色
阴影
渐变
颜色块
格式
字体
Emoji{{Emojifont}}
文字样式
全功能{{Font}} • 边框{{Border}}{{文字框}} • 代码格式化{{Pre}}{{Code}} • 强调{{Text-emphasis}} • 上划线{{上划线}} • 文字描边{{文字描边}} • 文字描边2{{文字描边2}}
假样式
{{假黑幕}} • {{假链}} • {{假折叠}} • {{Falselink}}
格式化
不可见0{{0}} • 交替文本{{Crosstext}} • 空格生成/重复文字{{Space}} • 填充空间/占位{{Pad}} • 小数舍入/补零{{Strformat}}
梗
自动化黑幕 {{黑幕}} • 灰色删除线 {{胡话}} • 模糊文字{{文字模糊}}
注音
Ruby系列
标准{{Ruby}} • 黑幕{{Rubyh}} • 简化{{Ruby+}} • 多行{{Ruby-begin}}{{Ruby-item}}{{Ruby-text-container}}{{Ruby-end}} • 单字{{Rubya}} • 简化版{{RawRuby}}
其它
注音开关{{Photrans}} • 多段注音开关{{Photrans2}} • 逐字注音开关{{Photransa}} • 日本人名{{日本人名}} • 国际音标字母表{{IPA}}
其它
定型文
{{配音表}} • {{提问箱}} • {{UnicodeTable}}
链接及分类相关
内链分类{{Cate}}{{萌点}} • 名字分类{{Catn}} • 跨语言链接{{Enlink}} • ISBN链接{{ISBN}} • 隐藏红链{{Link}} • 无标记外链{{Plain link}} • 黑字链接{{Blnk}} • 可变色链接{{Coloredlink}} • 链接语言标识{{Languageicon}}
导航框
导航框组件{{Navbox}}{{Navbox subgroup}}{{Navbox with columns}}{{Navbox with collapsible groups}}{{Navbar}} • 大家族简易模板{{大家族}}{{大家族模板子项}}{{大家族内容行}}{{Linksplit}} • 横向列表{{Hlist}}
注释
来源请求{{Citation needed}} • 已故人物{{Dead}}{{已故人物标注}} • 上标{{Supt}} • 分级标志{{游戏分级}} • 适龄提示标志{{适龄提示}} • 引言{{Cquote}}{{Quote frame}} • 附注{{Ps}}
取自“https://vrp.wiki/index.php?title=模板:Gradient_Text/doc&oldid=5285”