文本描边 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
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| color | string | 是 | | 填充颜色,接受任意合法 CSS 颜色或背景字符串(例如 '#fff'、'rgba(255,0,0,0.8)'、'linear-gradient(...)' 等)。 | 0.0.3 |
| outlineWidth | number | string | 是 | 1 | 描边宽度,支持 number 或 字符串。number → 视为像素(例如 1 → 1px),字符串按字面使用(例如 '0.1em'、'2px')。默认 1。 | 0.0.3 |
| autoPadding | boolean | 是 | true | 自动根据描边宽度加上左右 padding 以防止描边被裁剪。 | 0.0.3 |
TextOutlineSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | 文本内容插槽。 | 0.0.3 |