滤镜

滤镜

使用filter 属性来对元素应用模糊或颜色偏移等视觉效果。

<Box filter="blur(5px)" />
<Box filter="grayscale(80%)" />

属性	CSS 属性	Token 类别
filter	filter	-

模糊

使用 blur 属性来对元素应用模糊效果。此属性要求将 filter 属性设置为 auto。

// hardcoded value
<Box filter="auto" blur="5px" />

// token value
<Box filter="auto" blur="sm" />

属性	CSS 属性	Token 类别
blur	--blur	模糊

对比度

使用 contrast 属性来对元素应用对比度效果。此属性要求将 filter 属性设置为 auto。

<Box filter="auto" contrast="0.3" />

属性	CSS 属性	Token 类别
contrast	--contrast	-

投影

使用 dropShadow 属性来对元素应用投影效果。此属性要求将 filter 属性设置为 auto。

<Box filter="auto" dropShadow="0px 0px 10px rgba(0, 0, 0, 0.5)" />

属性	CSS 属性	Token 类别
dropShadow	--drop-shadow	-

灰度

使用 grayscale 属性来对元素应用灰度效果。此属性要求将 filter 属性设置为 auto。

<Box filter="auto" grayscale="64%" />

属性	CSS 属性	Token 类别
grayscale	--grayscale	-

色相旋转

使用 hueRotate 属性来对元素应用色相旋转效果。此属性要求将 filter 属性设置为 auto。

<Box filter="auto" hueRotate="30deg" />

属性	CSS 属性	Token 类别
hueRotate	--hue-rotate	-

反转

使用 invert 属性来对元素应用反转效果。此属性要求将 filter 属性设置为 auto。

<Box filter="auto" invert="40%" />

属性	CSS 属性	Token 类别
invert	--invert	-

饱和度

使用 saturate 属性来对元素应用饱和度效果。此属性要求将 filter 属性设置为 auto。

<Box filter="auto" saturate="0.4" />

属性	CSS 属性	Token 类别
saturate	--saturate	-

深褐色

使用 sepia 属性来对元素应用深褐色效果。此属性要求将 filter 属性设置为 auto。

<Box filter="auto" sepia="0.4" />

属性	CSS 属性	Token 类别
sepia	--sepia	-

背景滤镜

使用 backdropFilter 属性来对元素后面的区域应用模糊或颜色偏移等视觉效果。这将创建一个半透明效果。

<Box backdropFilter="blur(5px)" />
<Box backdropFilter="grayscale(80%)" />

属性	CSS 属性	Token 类别
backdropFilter	backdrop-filter	-

背景模糊

使用 backdropBlur 属性来对元素后面的区域应用模糊效果。此属性要求将 backdropFilter 属性设置为 auto。

// hardcoded value
<Box backdropFilter="auto" backdropBlur="5px" />

// token value
<Box backdropFilter="auto" backdropBlur="sm" />

属性	CSS 属性	Token 类别
backdropBlur	--backdrop-blur	模糊

背景对比度

使用 backdropContrast 属性来对元素后面的区域应用对比度效果。此属性要求将 backdropFilter 属性设置为 auto。

<Box backdropFilter="auto" backdropContrast="0.3" />

属性	CSS 属性	Token 类别
backdropContrast	--backdrop-contrast	-

背景灰度

使用 backdropGrayscale 属性来对元素后面的区域应用灰度效果。此属性要求将 backdropFilter 属性设置为 auto。

<Box backdropFilter="auto" backdropGrayscale="64%" />

属性	CSS 属性	Token 类别
backdropGrayscale	--backdrop-grayscale	-

背景色相旋转

使用 backdropHueRotate 属性来对元素后面的区域应用色相旋转效果。此属性要求将 backdropFilter 属性设置为 auto。

<Box backdropFilter="auto" backdropHueRotate="30deg" />

属性	CSS 属性	Token 类别
backdropHueRotate	--backdrop-hue-rotate	-

背景反转

使用 backdropInvert 属性来对元素后面的区域应用反转效果。此属性要求将 backdropFilter 属性设置为 auto。

<Box backdropFilter="auto" backdropInvert="40%" />

属性	CSS 属性	Token 类别
backdropInvert	--backdrop-invert	-

背景不透明度

使用 backdropOpacity 属性来对元素后面的区域应用不透明度效果。此属性要求将 backdropFilter 属性设置为 auto。

<Box backdropFilter="auto" backdropOpacity="0.4" />

属性	CSS 属性	Token 类别
backdropOpacity	--backdrop-opacity	-

背景饱和度

使用 backdropSaturate 属性来对元素后面的区域应用饱和度效果。此属性要求将 backdropFilter 属性设置为 auto。

<Box backdropFilter="auto" backdropSaturate="0.4" />

属性	CSS 属性	Token 类别
backdropSaturate	--backdrop-saturate	-

背景深褐色

使用 backdropSepia 属性来对元素后面的区域应用深褐色效果。此属性要求将 backdropFilter 属性设置为 auto。

<Box backdropFilter="auto" backdropSepia="0.4" />

属性	CSS 属性	Token 类别
backdropSepia	--backdrop-sepia	-