模板:文字外發光

W​(留言 | 貢獻)2023年4月1日 (六) 18:59的修訂 (创建页面,内容为“<includeonly><span style="{{#if:{{{文字颜色|}}}|color:{{{文字颜色|#000000}}}; |}}text-shadow: 1px 1px {{{发光宽度|2px}}} {{{发光颜色|#ffffff}}}, 1px -1px {{{发光宽度|2px}}} {{{发光颜色|#ffffff}}}, -1px 1px {{{发光宽度|2px}}} {{{发光颜色|#ffffff}}}, -1px -1px {{{发光宽度|2px}}} {{{发光颜色|#ffffff}}};{{{CSS|}}}">{{{1}}}</span></includeonly><noinclude>{{Documentation}}</noinclude>”)
(差異) ←上個修訂 | 最新修訂 (差異) | 下個修訂→ (差異)
模板文檔  [查看] [編輯] [歷史] [刷新]

這是一個模糊文字陰影來實現簡單外發光的模板。

另有使用-webkit-text-stroke實現的相似效果模板{{文字外發光/stroke}}供選用。

原理簡介

本模板相當於使用text-shadow給文字加上四個方向不同的文字陰影,並通過模糊參數使其模糊化,以達到外發光的效果。

模板參數

參數 說明 默認值
(1) 要發光的文本 無
發光寬度 外發光的寬度,單位為px或em
若設置寬度為0,則相當於為文字加上1像素的描邊。
2px
文字顏色 文字本身的顏色 #000000(黑色)
發光顏色 文字外發光的顏色 #FFFFFF(白色)
CSS 額外的CSS樣式 無

使用方法

{{文字外发光|内容|发光宽度=(宽度,单位px或em)|文字颜色=(颜色代码)|发光颜色=(颜色代码)}}

示例

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

效果:2像素的紅色外發光

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

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

{{文字外发光|发光宽度0相当于1像素描边,但效果并不好|发光宽度=0|文字颜色=white|发光颜色=rgb(0, 0, 0)}}

效果:發光寬度0相當於1像素描邊,但效果並不好

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

效果:如果覺得外發光太重,顏色代碼可以用rgba(r, g, b, alpha)的alpha值來控制外發光透明度

相關模板