Skip to content

文本描边 TextOutline

一个用于给文字添加描边的轻量组件,常用于强调标题或装饰性文字效果。

基本用法

将文字放入默认插槽。使用 color 设置文字描边颜色,使用 outlineWidth 控制描边粗细。

Outlined Text
Outlined Text
隐藏源代码

填充颜色

color 接受任意 CSS 颜色字符串(十六进制、rgb / rgba、颜色名,或通过 CSS 变量/背景字符串实现渐变等),作为文字的描边填充。

Outlined Text
隐藏源代码

描边宽度

outlineWidth 控制描边宽度。若传入数字,则转换为像素单位;传入字符串则按字面使用(例如 '0.1em''2px')。

Outlined Text
Outlined Text
Outlined Text
Outlined Text
Outlined Text
Outlined Text
Outlined Text
Outlined Text
隐藏源代码

API

TextOutlineProps

属性类型可选默认值描述版本
colorstring填充颜色,接受任意合法 CSS 颜色或背景字符串(例如 '#fff''rgba(255,0,0,0.8)''linear-gradient(...)' 等)。0.0.3
outlineWidthnumber | string1描边宽度,支持 number 或 字符串。number → 视为像素(例如 11px),字符串按字面使用(例如 '0.1em''2px')。默认 10.0.3
autoPaddingbooleantrue自动根据描边宽度加上左右 padding 以防止描边被裁剪。0.0.3

TextOutlineSlots

插槽参数描述版本
default文本内容插槽。0.0.3