Text3D 文字立体效果
用于创建具有 3D 立体感的文字效果。
基础用法
设置 text
属性来指定显示的文字内容。
自定义层级
通过 layer
属性设置阴影的层数,数值越大立体感越强。
方向控制
使用 direction
属性控制立体效果的方向,支持 top-left
、top-right
、bottom-left
、bottom-right
四个方向。
模糊效果
添加 blur
属性来启用阴影的模糊效果。
自定义样式
可以通过 color
、shadowColor
和 letterSpacing
属性来自定义文字样式。
属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
text | 显示的文字内容 | string | — |
color | 文字颜色 | string | var(--onl-primary) |
shadowColor | 阴影颜色 | string | var(--onl-purple-900) |
layer | 立体效果的层数 | number | 5 |
letterSpacing | 字间距 | string | '0' |
direction | 立体效果的方向 | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | — |
blur | 是否启用模糊效果 | boolean | false |