Template:渐变发光/doc
跳到导航
跳到搜索
本模板用于实现文字的渐变外发光效果,用户可以设置外发光的颜色渐变方向、设置多层渐变颜色、设置外发光的宽度。
简介
本模板叠加两层文本,将下层文本以类似{{Gradient 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
以查看效果)。
由于本模板使用了多层文本,在嵌套使用时强烈建议将其他模板置于此模板外层,否则会导致展开长度超级加倍。
- 本模板使用了模板样式表,请勿将其直接展开后用于签名。
参数
序号 | 参数名 | 说明 | 默认值 |
---|---|---|---|
1 | content | 文字内容 | 无 |
2 | FontColor | 文字颜色 | #FFF(白色) |
3 | GradientColor | 渐变代码,具体用法可见{{Gradient Text}} | left,blue,red(从左到右、从蓝色渐变为红色) |
4 | GlowSize | 外发光尺寸(即底层模糊度),单位为px | 4 |
5 | CSS | 额外的CSS样式,在这里填写可以减小展开长度 | 无 |
使用示例
代码 | 效果 |
---|---|
{{渐变发光|content=从左到右的三色渐变|FontColor=white|GradientColor=left, #F37A93, #90ACF3, #F1D788|GlowSize=5}} |
从左到右的三色渐变从左到右的三色渐变从左到右的三色渐变从左到右的三色渐变从左到右的三色渐变从左到右的三色渐变 |
{{渐变发光|从左下到右上的<br>蓝紫红黄四色渐变|white|45deg, blue, purple, red, yellow|5|font-size:1.2em;font-weight:bold}} |
从左下到右上的 蓝紫红黄四色渐变从左下到右上的 蓝紫红黄四色渐变从左下到右上的 蓝紫红黄四色渐变从左下到右上的 蓝紫红黄四色渐变从左下到右上的 蓝紫红黄四色渐变从左下到右上的 蓝紫红黄四色渐变 |
相关模板
- {{Blur}}
- {{文字外发光}}
- {{Gradient Text}}