跳转到内容

阴影

使用 box-shadow 工具集为元素添加或删除阴影。

示例

该工具可以让你控制两平面之间沿 z 轴方向的相对深度,或者说距离。 By default, there are 25 elevation levels.

boxShadow: 0
boxShadow: 1
boxShadow: 2
boxShadow: 3
<Box sx={{ boxShadow: 0 }}><Box sx={{ boxShadow: 1 }}><Box sx={{ boxShadow: 2 }}><Box border={0}><Box sx={{ boxShadow: 0 }}><Box borderRight={0}><Box borderBottom={0}><Box borderLeft={0}><Box sx={{ boxShadow: 1 }}><Box sx={{ boxShadow: 2 }}><Box sx={{ boxShadow: 3 }}><Box sx={{ boxShadow: 1 }}><Box sx={{ boxShadow: 2 }}><Box sx={{ boxShadow: 3 }}><Box sx={{ boxShadow: 1 }}><Box sx={{ boxShadow: 2 }}><Box sx={{ boxShadow: 3 }}><Box sx={{ boxShadow: 1 }}><Box sx={{ boxShadow: 2 }}><Box sx={{ boxShadow: 3 }}>

API

import { shadows } from '@mui/system';
导入名称 属性 CSS 属性 Theme key
boxShadow boxShadow box-shadow shadows