tailwind中的滤镜

使用css中的filter属性添加各种滤镜

使用filter-none可以删除全部滤镜

模糊

自定义： blur-[width]

blur-none   filter: blur(0)
blur        filter: blur(8px)

亮度： brightness-[num]： num为一个表示亮度值的数字

对比度： contrast-[num]： num为一个表示对比度的数字

阴影

自定义： drop-shadow-[x_y_[blur_]color]
    分别表示水平偏移、垂直偏移、模糊值(可省略)、阴影颜色

预设了几个常用的值
drop-shadow-none
drop-shadow-sm
drop-shadow
drop-shadow-md
drop-shadow-lg
drop-shadow-xl
drop-shadow-2xl

灰阶

任意值： grayscale-[%]

预设：
grayscale     grayscale-[100%]
grayscale-0   grayscale-[0]

色相旋转： hue-rotate-[deg]

颜色反转

任意值： invert-[%]

预设：
invert     invert-[100%]
invert-0   invert-[0]

饱和度： saturate-[%]

转为深褐色

任意值： sepia-[%]

预设：
sepia     sepia-[100%]
sepia-0   sepia-[0]

背景模糊

任意值： backdrop-blur-[px]

预设：
backdrop-blur        backdrop-blur-[8px]
backdrop-blur-none   backdrop-blur-[0]

背景亮度： backdrop-brightness-[num]

背景对比度： backdrop-contrast-[num]

背景灰阶： backdrop-grayscale-[%]

背景色相旋转： backdrop-hue-rotate-[deg]

背景颜色反转： backdrop-invert-[%]

背景透明度： backdrop-opacity-[%]

背景饱和度： backdrop-saturate-[%]

背景深褐色： backdrop-sepia-[%]