模板:文字外發光/stroke

出自魔学
W​(留言 | 貢獻)2023年4月1日 (六) 18:57的修訂 (创建页面,内容为“{{blur}}<span style="position:relative;display:inline-block;z-index:2;color:{{{文字颜色|{{{文本颜色|inherit}}}}}};{{{CSS|}}}">{{{1}}}<span style="position:absolute;left:0;top:0;z-index:-1;-webkit-user-select:none;user-select:none;-webkit-text-stroke:{{{发光宽度|0.3em}}} {{{发光颜色|white}}};{{blur|{{{发光模糊度|4}}}}}">{{{1}}}</span></span><noinclude>{{documentation}}</noinclude>”)
(差異) ←上個修訂 | 最新修訂 (差異) | 下個修訂→ (差異)

{{{1}}}{{{1}}}

模板文檔  [查看] [編輯] [歷史] [刷新]

本模板用於實現文字的外發光效果。原理類似{{文字描邊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值來控制外發光透明度