看不见的画笔:关于CSS filter: url() 的一点胡思乱想 第一次听到“CSS 滤镜”,脑子里浮现的是Instagram里那些花里胡哨的滤镜:复古胶片、清新甜美、暗黑哥特……一键磨皮美白,仿佛掌握了魔法,瞬间让平平无奇的照片变得高级起来。 后来才知道,CSS 滤镜远不止于此,特别是那个神秘兮兮的 filter: url() ,简直就像一个隐藏的宝藏,等待着你去挖掘。 filter: url(),简单来说,就是让CSS调用SVG定义的滤镜效果。 SVG,可缩放矢量图形,本身就是个充满想象力的世界,而滤镜,则是这个世界的调色盘和画笔。通过 filter: url() ,我们就能把SVG滤镜的强大能力引入到CSS中,给网页元素添加各种各样令人惊艳的视觉效果。 我一开始对 filter: url() 抱着敬畏之心。毕竟,SVG嘛,听起来就高大上,代码更是像天书一样,各种 <feGaussianBlur>, <feColorMatrix>, <feDisplacementMap>,看得我头昏脑胀,感觉自己仿佛回到了大学课堂,正在努力理解那些晦涩难懂的 …