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 | string是1描边宽度,支持 number 或 字符串。number → 视为像素(例如 1 → 1px),字符串按字面使用(例如 '0.1em'、'2px')。默认 1。0.0.3
autoPaddingboolean是true自动根据描边宽度加上左右 padding 以防止描边被裁剪。0.0.3

TextOutlineSlots ​

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