火狐下css滤镜效果怎么实现_IT百科

滤镜效果filter的css样式属性是微软Internet Explorer特有的，未被W3C收入，故而在火狐浏览器下尚未提供支持。但是通过js编码可以部分实现一些滤镜效果，如透明等。

随着浏览器的发展CSS的功能越来越强大，大多数的滤镜效果有类似功能的CSS样式实现了。

对应表：

IE 滤镜　W3C 滤镜

Alpha：设置透明层次. grayscale 灰度

blur：创建高速度移动效果，即模糊效果. sepia 褐色

Chroma：制作专用颜色透明. 　 saturate 饱和度

DropShadow：创建对象的固定影子. hue-rotate 色相旋转

FlipH：创建水平镜像图片. 　invert 反色

FlipV：创建垂直镜像图片.　 opacity 透明度

glow：加光辉在附近对象的边外. brightness 亮度

gray：把图片灰度化.　 contrast 对比度

invert：反色.blur 模糊

light：创建光源在对象上. 　drop-shadow 阴影

mask：创建透明掩膜在对象上.

shadow：创建偏移固定影子.

wave：波纹效果.

Xray：使对象变的像被x光照射一样.

<!DOCTYPE HTML>

<html>

<head>

#all{border: 1px solid #BFBFBFwidth: 500pxheight: 200pxposition: relativetop: 100pxmargin: 0 auto}

li{list-style: nonewidth: 120pxheight: 120pxbackground: #000000float: leftmargin-left: 5pxtext-align: centercolor: #FFFFFFfont-size: 20px}

li:hover{opacity: 0.5}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

所谓的滤镜就是改变透明度而已，如果是在css中来写，就是直接给你要改变的标签设置透明度属性，如果是js，那就添加动画改变透明度，可以做出很多很炫的效果。

欢迎分享，转载请注明来源：内存溢出

火狐下css滤镜效果怎么实现