CSS3 滤镜（Filter）使用小结

CSS3滤镜（filter）与我们经常说的IE滤镜是两码事，IE滤镜是指老版本的(4.0 到9.0)Windows IE浏览器支持一种非标准的 "filter" ，目前已经被现代浏览器弃用。

CSS3滤镜（filter）属性提供的图形特效，如灰度、透明度、模糊、阴影等。

CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 可以使用空格分隔多个滤镜。

Filter 函数

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

延伸 渐进增强和优雅降级

渐进增强和优雅降级这两个概念是在CSS3出现之后火起来的。由于低级浏览器不支持 CSS3，但是CSS3特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同。

渐进增强（Progressive Enhancement）

一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）

一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用CSS3的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本，向上兼容的很少。大多数软件都是向下兼容的，比如说Office2010能打开Office2007，Office2006，Office2005，Office2003等建的word文件，但是用Office2003就不能打开用Office2007，Office2010等建的word文件！

CSS3 滤镜（Filter）使用场景

设计师给到的是可领取和已领取两种状态按钮，后端程序跑过来说他那边没有已领取状态，只有不可点击状态，要改成下面这种需求

本着不给别人添麻烦，省得需要设计重新设计图。不妨用CSS3 滤镜（Filter）来实现灰度效果

html代码：

<span class="gift-btn disabled">领取</span>

css代码：

.gift-btn{
    display:block;
    width:170px;
    height:56px;
    line-height:56px;
    background:url(//static.2144.cn/huodong/act/grwhy/pc/images/t.png) no-repeat;
    text-shadow:1px 1px 2px rgba(0,0,0,.7),1px 1px 2px rgba(0,0,0,.7);
    color:#fff;
    font-size:24px;
    text-align:center;
    cursor:pointer;
}
.gift-btn.disabled{
    cursor:default;
    opacity:.5;
    filter:grayscale(1);
    filter:Alpha(opacity=50);
}

1. opacity:.5;通过透明度来区别按钮状态;

2. filter:grayscale(1);渐进增强-支持css3 Filter的浏览器

3.  filter:Alpha(opacity=50);//优雅降级-利用老版本的 (4.0 到 9.0) Windows IE浏览器支持而现代浏览器已经弃用的一种非标准 "filter" ，实现透明度来区别按钮状态;

其它使用场景，例如下方的箭头：

CSS3滤镜（filter）实现文字融合动画

<div class="container">
  <h1>Blur word Animation</h1>
</div>

@import url(https://fonts.googleapis.com/css?family=Righteous);

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: black;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 2em;
    filter: contrast(20);
    background-color: black;
    overflow: hidden;
}

h1 {
    font-family: Righteous;
    color: white;
    font-size: 4rem;
    text-transform: uppercase;
    line-height: 1;
    animation: letterspacing 5s infinite alternate ease-in-out;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    letter-spacing: -2.2rem;
}

@keyframes letterspacing {
    0% {
        letter-spacing: -2.2rem;
        filter: blur(.3rem);
    }

    50% {
        filter: blur(.5rem);
    }

    100% {
        letter-spacing: .5rem;
        filter: blur(0rem);
        color: #fff;
    }
}