css中常见的滤镜有哪些

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中常见的滤镜有很多种,这些滤镜能够对网页中的元素完成一些视觉上的改变,让网页看起来更炫酷、更美观。下面我们就来了解一下几种常见的CSS滤镜。一、模糊滤镜 filter: blur(5px); 该

CSS中常见的滤镜有很多种,这些滤镜能够对网页中的元素完成一些视觉上的改变,让网页看起来更炫酷、更美观。下面我们就来了解一下几种常见的CSS滤镜。

一、模糊滤镜

 filter: blur(5px); 

该滤镜可以让元素模糊处理,括号里的数值越大,则元素就会变得越模糊。

二、灰度滤镜

 filter: grayscale(100%); 

该滤镜可以让元素变灰,数字越大则元素越灰。

三、透明度滤镜

 filter: opacity(50%); 

该滤镜可以让元素半透明,数字越大则元素越不透明。

四、反转颜色滤镜

 filter: invert(100%); 

该滤镜可以让元素颜色反转,数字越大则元素颜色越接近黑色。

五、饱和度滤镜

 filter: saturate(200%); 

该滤镜可以让元素饱和度增强,数字越大则元素的颜色越鲜艳。

六、亮度滤镜

 filter: brightness(200%); 

该滤镜可以让元素的亮度增强,数字越大则元素越亮。

七、对比度滤镜

 filter: contrast(200%); 

该滤镜可以让元素的对比度增强,数字越大则元素的明暗差异越明显。

八、阴影滤镜

 filter: drop-shadow(10px 10px 10px #000); 

该滤镜可以让元素添加阴影效果,第一个参数为水平偏移量,第二个参数为垂直偏移量,第三个参数为阴影模糊半径,第四个参数为阴影颜色。

以上就是CSS中常见的滤镜,可以根据实际需要应用到元素上,让元素呈现出不一样的效果。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中常见的滤镜有哪些

粉丝

0

关注

0

收藏

0

已有0次打赏