模板:文字外发光/stroke/doc

来自魔学
W​(留言 | 贡献)2023年4月1日 (六) 18:58的版本 (创建页面,内容为“本模板用于实现文字的外发光效果。原理类似{{tl|文字描边2}},在原文本的下方加上一层相同的文本、用CSS的<code><nowiki>-webkit-text-stroke</nowiki></code>属性,对底层进行模糊实现。 == 模板参数 == {|class="wikitable" style="text-align:center" !参数!!说明!!默认值 |- |(1) |要发光的文本 |无 |- |发光宽度 |外发光的宽度,单位为px或em<br>若设置宽度为0,则相当于为文字…”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)

本模板用于实现文字的外发光效果。原理类似{{文字描边2}},在原文本的下方加上一层相同的文本、用CSS的-webkit-text-stroke属性,对底层进行模糊实现。

模板参数

参数 说明 默认值
(1) 要发光的文本 无
发光宽度 外发光的宽度,单位为px或em
若设置宽度为0,则相当于为文字加上1像素的描边。
2px
文字颜色/文本颜色 文字本身的颜色 #000000(黑色)
发光颜色 文字外发光的颜色 #FFFFFF(白色)
CSS 额外的CSS样式 无
发光模糊度 用于{{blur}}模板的参数,单位为px 4

本质上,如下两行代码等价:

{{文字外发光/stroke|要发光的文本|文字颜色=#FFF|发光颜色=purple|发光宽度=0.3em|发光模糊度=5}}
要发光的文本要发光的文本
{{blur}}{{文字描边2|要发光的文本|文本颜色=#FFF|描边颜色=purple|描边宽度=0.3em|CSS2={{blur|5}}}}
要发光的文本要发光的文本

示例

{{文字外发光/stroke|2像素的红色外发光|发光宽度=2px|文字颜色=black|发光颜色=red}}

效果:2像素的红色外发光2像素的红色外发光

{{文字外发光/stroke|0.8em紫色外发光的白字|发光宽度=0.8em|文字颜色=white|发光颜色=#BE00BB}}

效果:0.8em紫色外发光的白字0.8em紫色外发光的白字

{{文字外发光/stroke|如果觉得外发光太重,颜色代码可以用rgba(r, g, b, alpha)的alpha值来控制外发光透明度|发光宽度=0.3em|文字颜色=white|发光颜色=rgba(122, 159, 30, 40%)}}

效果:如果觉得外发光太重,颜色代码可以用rgba(r, g, b, alpha)的alpha值来控制外发光透明度如果觉得外发光太重,颜色代码可以用rgba(r, g, b, alpha)的alpha值来控制外发光透明度