Skip to content

Text3D 文字立体效果

用于创建具有 3D 立体感的文字效果。

基础用法

设置 text 属性来指定显示的文字内容。

自定义层级

通过 layer 属性设置阴影的层数,数值越大立体感越强。

方向控制

使用 direction 属性控制立体效果的方向,支持 top-lefttop-rightbottom-leftbottom-right 四个方向。

模糊效果

添加 blur 属性来启用阴影的模糊效果。

自定义样式

可以通过 colorshadowColorletterSpacing 属性来自定义文字样式。

属性

属性名说明类型默认值
text显示的文字内容string
color文字颜色stringvar(--onl-primary)
shadowColor阴影颜色stringvar(--onl-purple-900)
layer立体效果的层数number5
letterSpacing字间距string'0'
direction立体效果的方向'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
blur是否启用模糊效果booleanfalse