当前位置： 移动技术网 > IT编程>网页制作>CSS > CSS 滤镜技巧与细节

CSS 滤镜技巧与细节

2018年07月05日  | 移动技术网IT编程  | 我要评论

wow雷霆救兵,雅伯兰,鬼面獒

本文主要介绍 CSS 滤镜的不常用用法，希望能给读者带来一些干货！

注意：ie不兼容

本文所描述的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列时代的滤镜，话不多说，直接开车，语法如下：

{
    filter: blur(5px);
    filter: brightness(0.4);
    filter: contrast(200%);
    filter: drop-shadow(16px 16px 20px blue);
    filter: grayscale(50%);
    filter: hue-rotate(90deg);
    filter: invert(75%);
    filter: opacity(25%);
    filter: saturate(30%);
    filter: sepia(60%);
 
    /* Apply multiple filters */
    filter: contrast(175%) brightness(3%);
 
    /* Global values */
    filter: inherit;
    filter: initial;
    filter: unset;
}

基本用法

先简单看看几种滤镜的效果

你可以通过 hover 取消滤镜，观察该滤镜的效果。

简单来说，CSS 滤镜就是提供类似 PS 的图形特效，像模糊，锐化或元素变色等功能。通常被用于调整图片，背景和边界的渲染。

常用用法

既然是标题是你所不知道的技巧与细节，那么比较常用的一些用法就不再赘述，通常我们见得比较多的 CSS 滤镜用法有：

  1. 使用 filter: blur() 生成毛玻璃效果
  2. 使用 filter: drop-shadow() 生成整体阴影效果
  3. 使用 filter: opacity() 生成透明度

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网