副作用

盒子阴影

¥Box Shadow

使用 shadow 或 boxShadow prop 为元素应用框阴影。

¥Use the shadow or boxShadow prop to apply a box shadow to an element.

// 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

盒子阴影颜色

¥Box Shadow Color

使用 shadowColor 属性设置框阴影的颜色。此属性映射到 --shadow-color CSS 变量。

¥Use the shadowColor prop to set the color of a box shadow. This prop maps to the --shadow-color CSS variable.

<Box shadow="60px -16px var(--shadow-color)" shadowColor="red" />

属性	CSS 属性	标记类别
shadowColor	--shadow-color	colors

不透明度

¥Opacity

使用 opacity 属性设置元素的不透明度。

¥Use the opacity prop to set the opacity of an element.

<Box opacity="0.5" />

属性	CSS 属性	标记类别
opacity	opacity	opacity

混合模式

¥Mix Blend Mode

使用 mixBlendMode 属性控制元素内容如何与背景混合。

¥Use the mixBlendMode prop to control how an element's content should be blended with the background.

<Box bg="red.400">
  <Image src="..." mixBlendMode="hard-light" />
</Box>

属性	CSS 属性	标记类别
mixBlendMode	mix-blend-mode	*