跳到主要内容

Shadows

在ChatGPT中打开

阴影属性用于在元素的框架周围添加阴影效果。您可以设置多个效果,用逗号分隔。在大多数情况下,阴影用于表示用户界面中互相叠加的项目。

示例

.element {
box-shadow: var(--dwc-shadow-xl);
}
阴影颜色

您可以通过设置 --dwc-shadow-color 变量来控制阴影颜色。默认情况下,阴影颜色为灰色,带有主色调。

变量

变量示例
--dwc-shadow-xs
--dwc-shadow-s
--dwc-shadow-m
--dwc-shadow-l
--dwc-shadow-xl
--dwc-shadow-2xl
--dwc-shadow