CSS3里的色弱模式（反色）

vue3 + vite 的后台管理系统里的色弱模式简单实现一下

需在body或任意元素上加两个css的两个样式即可:

filter: invert(80%);
-webkit-filter: invert(80%); 

扩展一下与其相关的其他样式属性：

blur 模糊

filter: blur(6px);
-webkit-filter: blur(6px);

brightness 亮度

filter: brightness(25%);
-webkit-filter: brightness(25%);

contrast 对比度

filter: contrast(25%);
-webkit-filter: contrast(25%);

drop-shadow 阴影

filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

opacity 透明度

filter: opacity(25%);
-webkit-filter: opacity(25%);

grayscale 灰度

filter: grayscale(25%);
-webkit-filter: grayscale(25%);

sepia 褐色

filter: sepia(100%);
-webkit-filter: sepia(100%);

invert 反色

filter: invert(25%);
-webkit-filter: invert(25%);

hue-rotate 色相旋转

filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);

saturate 饱和度

filter: saturate(25%);
-webkit-filter: saturate(25%);