pleeease-filters 是一个方便的 PostCSS 插件，用于在 CSS 中使用一些不支持的 CSS 过滤器效果。本文将介绍如何使用 pleeease-filters 实现各种过滤器效果，并提供示例代码。
安装
--- ------- ---------------- ----------
用法
基础用法
----- ------- - -------------------
----- --------------- - ----------------------------
----- --- - -
----------- -
--------------- ----------
------- ----------
-
--
----------------------------
-------------
-------------- -- -
------------------------
---上述代码中，首先引入 postcss 和 pleeease-filters，然后定义要转换的 CSS 代码。接下来，我们通过 postcss 处理 CSS 并应用 pleeease-filters 插件。最后，我们打印处理后的 CSS。
效果列表
以下是 pleeease-filters 支持的效果：
blurbrightnesscontrastdrop-shadowgrayscalehue-rotateinvertopacitysaturatesepia
示例代码
模糊滤镜
----------- - --------------- ---------- ------- ---------- -
饱和度滤镜
----------- - --------------- ------------ ------- ------------ -
对比度滤镜
----------- - --------------- --------------- ------- --------------- -
混合效果
通过组合多个效果，可以实现更复杂的效果。
饱和度 + 反转
----------- - --------------- ----------- ---------- ------- ----------- ---------- -
灰度 + 模糊
----------- - --------------- --------------- ---------- ------- --------------- ---------- -
总结
使用 pleeease-filters 插件，我们可以在 CSS 中方便地实现一些不支持的过滤器效果。本文介绍了 pleeease-filters 的安装和基础用法，并提供了各种过滤器效果的示例代码。通过组合这些效果，我们可以实现更复杂的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/46594