效果
用于设置盒阴影、不透明度等的 JSX 样式属性
盒阴影
使用shadow 或 boxShadow 属性为元素应用盒阴影。
// hardcoded values
<Box shadow="12px 12px 2px 1px rgba(0, 0, 255, .2)" />
// token values
<Box shadow="lg" />| 属性 | CSS 属性 | 令牌类别 |
|---|---|---|
shadows, boxShadow | box-shadow | shadows |
shadowColor | --shadow-color | colors |
盒阴影颜色
使用 shadowColor 属性设置盒阴影的颜色。此属性映射到 --shadow-color CSS 变量。
<Box shadow="60px -16px var(--shadow-color)" shadowColor="red" />| 属性 | CSS 属性 | 令牌类别 |
|---|---|---|
shadowColor | --shadow-color | colors |
不透明度
使用 opacity 属性设置元素的不透明度。
<Box opacity="0.5" />| 属性 | CSS 属性 | 令牌类别 |
|---|---|---|
opacity | opacity | opacity |
混合模式
使用 mixBlendMode 属性控制元素内容如何与背景混合。
<Box bg="red.400">
<Image src="..." mixBlendMode="hard-light" />
</Box>| 属性 | CSS 属性 | 令牌类别 |
|---|---|---|
mixBlendMode | mix-blend-mode | - |