Guides

阴影

理解您主题中使用的阴影样式。

组件中使用的阴影来源于一个六级尺度。有关实现这些阴影的实际值,请参考 源代码

1
2
3
4
5
6

阴影代币

阴影代币可以通过 CSS 变量访问。您可以使用这些代币来样式化您的自定义组件,确保它们与您主题的其余部分保持一致。

/* 内嵌阴影 */
var(--shadow-1);
/* 用于 variant="classic" 面板的阴影,如 Card */
var(--shadow-2);
var(--shadow-3);
/* 用于较小的浮层面板的阴影,如 Hover Card 和 Popover */
var(--shadow-4);
var(--shadow-5);
/* 用于较大浮层面板的阴影,如 Dialog */
var(--shadow-6);
上一篇圆角 Radius