CSS 滤镜

CSS 滤镜是功能强大的新工具,它使浏览器能实现一些图像后期处理软件的功能。滤镜属性使浏览器可以实现像模糊、图像调整,甚至下拉阴影之类的效果。

滤镜的语法很简单 :滤镜类型后面跟上滤镜 filter 属性,如模糊 blur,括号内加上它的值。

.filter {
    filter : blur(3px); 
}

高斯模糊 blur

亮度 brightness

.itembox.b2{
    filter : brightness(50%); 
}
.itembox.b3{
    filter : brightness(200%); 
}

对比度 contrast

.itembox.b2{
    filter : contrast(50%); 
}
.itembox.b3{
    filter : contrast(200%); 
}

阴影 drop-shadow

.itembox.b2{
    filter : drop-shadow(5px 5px 5px rgba(0,0,0,.5));
}
.itembox.b3{
    box-shadow: 5px 5px 5px rgba(0,0,0,.5);
}

灰度 grayscale

.itembox.b2{
    filter : grayscale(50%); 
}
.itembox.b3{
    filter : grayscale(100%); 
}

色调旋转 hue-rotate

.itembox.b2{
    filter : hue-rotate(90deg); 
}
.itembox.b3{
    filter : hue-rotate(180deg); 
}

反色 invert

.itembox.b2{
    filter : invert(50%); 
}
.itembox.b3{
    filter : invert(100%); 
}

透明度 opacity

.itembox.b2{
    filter : opacity(50%); 
}
.itembox.b3{
    filter : opacity(10%); 
}

饱和度 saturate

.itembox.b2{
    filter : saturate(0%); 
}
.itembox.b3{
    filter : saturate(200%); 
}

褐色 sepia

.itembox.b2{
    filter : sepia(50%); 
}
.itembox.b3{
    filter : sepia(100%); 
}