css filter 实现各种滤镜效果

• #css

css filter 是个强大的属性，一行 css 就能实现滤镜效果：模糊(毛玻璃)、轮廓阴影、黑白照等；

有一只很可爱的小狗图片如下，图片背景颜色是透明的。

blur 实现模糊/毛玻璃效果

原图

加透明度 opacity: 0.2;

加模糊滤镜 filter: blur(10px);

模糊效果和透明效果是不一样的，可以看上面中间图片和最右边图片。

模糊/毛玻璃在手机上见到的非常多，很多手机📱从顶部向下拉出通知栏，通知栏的背景就是模糊的；

很多家庭卫生间的门也是毛玻璃效果，采光更好，在卫生间门外看里面也是模糊的。

drop-shadow 实现阴影效果

加边框

加盒子阴影
box-shadow: 2px 2px 6px green;

加滤镜阴影
filter: drop-shadow(2px 2px 6px green);

img 是个块级元素，box-shadow 是给块级元素添加阴影，感官就是给图片边框外面加一层阴影；

filter: drop-shadow() 沿图像的轮廓生成阴影效果。

grayscale 实现黑白效果

原图

黑白照 filter: grayscale(100%);

有的时候需要给图片添加黑白照滤镜，比如可爱的小狗活了100岁离开了这个世界，可以用黑白照来纪念它。

filter: grayscale() 将图像转换为灰度图，参数为 0% 表示原图，100% 表示黑白图，中间值可以调整黑白照的程度。

↶ 返回首页 ↶