阴影
使用 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 |