Template:文字外发光

Template-info.svg 模板文档  [查看] [编辑] [历史] [刷新]

这是一个模糊文字阴影来实现简单外发光的模板。

另有使用-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值来控制外发光透明度

相关模板

返回顶部