Skip to Content
文档

阴影

可用阴影标记列表

语义令牌

¥Semantic Tokens

Chakra UI 开箱即用地支持这些语义标记。

¥Chakra UI supports these semantic tokens out of the box.

theme.semanticTokens.shadows

xs
sm
md
lg
xl
2xl
inner
inset

以下是如何添加新阴影的示例。

¥Here’s an example of how to add new shadows.

export const system = createSystem(defaultConfig, {
    theme: {
        semanticTokens: {
            shadows: {
                custom: {
                    value: {
                        _light: "0 32px 56px 0 rgba(0, 0, 0, 0.25)",
                        _dark: "0 32px 56px 0 rgba(0, 0, 0, 0.25)",
                    },
                },
            },
        },
    },
});

Previous

半径

Next

尺寸