过滤器
用于将各种滤镜应用于元素的 JSX 样式属性。
过滤
¥Filter
使用 filter 属性对元素应用模糊或颜色偏移等视觉效果。
¥Use the filter prop to apply visual effects like blur or color shift to an
element.
<Box filter="blur(5px)" />
<Box filter="grayscale(80%)" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
filter | filter | * |
模糊
¥Blur
使用 blur 属性为元素应用模糊效果。此属性的要求是将 filter 属性设置为 auto。
¥Use the blur prop to apply a blur effect to an element. The requirement for
this prop is to set the filter prop to auto.
// hardcoded value
<Box filter="auto" blur="5px" />
// token value
<Box filter="auto" blur="sm" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
blur | --blur | blurs |
对比度
¥Contrast
使用 contrast 属性为元素应用对比效果。此属性的要求是使用 filter 属性并将其设置为 auto。
¥Use the contrast prop to apply a contrast effect to an element. The
requirement for this prop is to use the filter prop and set it to auto.
<Box filter="auto" contrast="0.3" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
contrast | --contrast | * |
阴影
¥Drop Shadow
使用 dropShadow 属性为元素应用阴影效果。此属性的要求是使用 filter 属性并将其设置为 auto。
¥Use the dropShadow prop to apply a drop shadow effect to an element. The
requirement for this prop is to use the filter prop and set it to auto.
<Box filter="auto" dropShadow="0px 0px 10px rgba(0, 0, 0, 0.5)" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
dropShadow | --drop-shadow | * |
灰度
¥Grayscale
使用 grayscale 属性为元素应用灰度效果。此属性的要求是使用 filter 属性并将其设置为 auto。
¥Use the grayscale prop to apply a grayscale effect to an element. The
requirement for this prop is to use the filter prop and set it to auto.
<Box filter="auto" grayscale="64%" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
grayscale | --grayscale | * |
色调旋转
¥Hue Rotate
使用 hueRotate 属性为元素应用色相旋转效果。此属性的要求是使用 filter 属性并将其设置为 auto。
¥Use the hueRotate prop to apply a hue rotate effect to an element. The
requirement for this prop is to use the filter prop and set it to auto.
<Box filter="auto" hueRotate="30deg" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
hueRotate | --hue-rotate | * |
反转
¥Invert
使用 invert 属性对元素应用反转效果。此属性的要求是使用 filter 属性并将其设置为 auto。
¥Use the invert prop to apply an invert effect to an element. The requirement
for this prop is to use the filter prop and set it to auto.
<Box filter="auto" invert="40%" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
invert | --invert | * |
饱和度
¥Saturate
使用 saturate 属性为元素应用饱和度效果。此属性的要求是使用 filter 属性并将其设置为 auto。
¥Use the saturate prop to apply a saturate effect to an element. The
requirement for this prop is to use the filter prop and set it to auto.
<Box filter="auto" saturate="0.4" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
saturate | --saturate | * |
棕褐色
¥Sepia
使用 sepia 属性对元素应用棕褐色效果。此属性的要求是使用 filter 属性并将其设置为 auto。
¥Use the sepia prop to apply a sepia effect to an element. The requirement for
this prop is to use the filter prop and set it to auto.
<Box filter="auto" sepia="0.4" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
sepia | --sepia | * |
背景滤镜
¥Backdrop Filter
使用 backdropFilter 属性对元素后面的区域应用模糊或颜色偏移等视觉效果。这将创建半透明效果。
¥Use the backdropFilter prop to apply visual effects like blur or color shift
to the area behind an element. This creates a translucent effect.
<Box backdropFilter="blur(5px)" />
<Box backdropFilter="grayscale(80%)" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
backdropFilter | backdrop-filter | * |
背景模糊
¥Backdrop Blur
使用 backdropBlur 属性为元素后方区域应用模糊效果。此属性的要求是将 backdropFilter 属性设置为 auto。
¥Use the backdropBlur prop to apply a blur effect to the area behind an
element. The requirement for this prop is to set the backdropFilter prop to
auto.
// hardcoded value
<Box backdropFilter="auto" backdropBlur="5px" />
// token value
<Box backdropFilter="auto" backdropBlur="sm" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
backdropBlur | --backdrop-blur | blurs |
背景对比度
¥Backdrop Contrast
使用 backdropContrast 属性为元素后方区域应用对比效果。此属性的要求是使用 backdropFilter 属性并将其设置为 auto。
¥Use the backdropContrast prop to apply a contrast effect to the area behind an
element. The requirement for this prop is to use the backdropFilter prop and
set it to auto.
<Box backdropFilter="auto" backdropContrast="0.3" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
backdropContrast | --backdrop-contrast | * |
背景灰度
¥Backdrop Grayscale
使用 backdropGrayscale 属性为元素后方区域应用灰度效果。此属性的要求是使用 backdropFilter 属性并将其设置为 auto。
¥Use the backdropGrayscale prop to apply a grayscale effect to the area behind
an element. The requirement for this prop is to use the backdropFilter prop
and set it to auto.
<Box backdropFilter="auto" backdropGrayscale="64%" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
backdropGrayscale | --backdrop-grayscale | * |
背景色相旋转
¥Backdrop Hue Rotate
使用 backdropHueRotate 属性为元素后方区域应用色相旋转效果。此属性的要求是使用 backdropFilter 属性并将其设置为 auto。
¥Use the backdropHueRotate prop to apply a hue rotate effect to the area behind
an element. The requirement for this prop is to use the backdropFilter prop
and set it to auto.
<Box backdropFilter="auto" backdropHueRotate="30deg" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
backdropHueRotate | --backdrop-hue-rotate | * |
背景反转
¥Backdrop Invert
使用 backdropInvert 属性对元素后面的区域应用反转效果。此属性的要求是使用 backdropFilter 属性并将其设置为 auto。
¥Use the backdropInvert prop to apply an invert effect to the area behind an
element. The requirement for this prop is to use the backdropFilter prop and
set it to auto.
<Box backdropFilter="auto" backdropInvert="40%" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
backdropInvert | --backdrop-invert | * |
背景不透明度
¥Backdrop Opacity
使用 backdropOpacity 属性对元素后面的区域应用不透明效果。此属性的要求是使用 backdropFilter 属性并将其设置为 auto。
¥Use the backdropOpacity prop to apply an opacity effect to the area behind an
element. The requirement for this prop is to use the backdropFilter prop and
set it to auto.
<Box backdropFilter="auto" backdropOpacity="0.4" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
backdropOpacity | --backdrop-opacity | * |
背景饱和度
¥Backdrop Saturate
使用 backdropSaturate 属性对元素后面的区域应用饱和效果。此属性的要求是使用 backdropFilter 属性并将其设置为 auto。
¥Use the backdropSaturate prop to apply a saturate effect to the area behind an
element. The requirement for this prop is to use the backdropFilter prop and
set it to auto.
<Box backdropFilter="auto" backdropSaturate="0.4" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
backdropSaturate | --backdrop-saturate | * |
背景棕褐色
¥Backdrop Sepia
使用 backdropSepia 属性对元素后面的区域应用棕褐色效果。此属性的要求是使用 backdropFilter 属性并将其设置为 auto。
¥Use the backdropSepia prop to apply a sepia effect to the area behind an
element. The requirement for this prop is to use the backdropFilter prop and
set it to auto.
<Box backdropFilter="auto" backdropSepia="0.4" />| 属性 | CSS 属性 | 标记类别 |
|---|---|---|
backdropSepia | --backdrop-sepia | * |