CSS3是当下非常火的一个话题,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫无作为,很多有经验的开发者都听知道IE的滤镜,看看下面的内容将告诉大家,IE是如何通过这些滤镜,实现CSS3效果的。

透明度

最为开发者所熟知的滤镜之一。

#myElement {
opacity: .4; /* other browsers */
filter: progid: DXImageTransform.Microsoft.Alpha( opacity=40 ); /* IE6, IE7, and IE8 */
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha( opacity=40 )"; /* IE8 only */
}

阴影

.box-shadow { -moz-box-shadow: 2px 2px 3px #969696; /* Firefox */ -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */ filter: progid:DXImageTransform.Microsoft.Shadow( color='#969696', Direction=145, Strength=3 ); }

渐变

#gradient {
/* Firefox 3.6 */
background-image: -moz-linear-gradient( top, #81a8cb, #4477a1 );
/* Safari & Chrome */
background-image: -webkit-gradient(linear , left bottom , left top , color-stop( 0, #4477a1 ) ,
color-stop( 1, #81a8cb ));
/* IE6 & IE7 */
filter: progid:DXImageTransform.Microsoft.gradient( GradientType= 0 , startColorstr = '#81a8cb',
endColorstr = '#4477a1' );
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#81a8cb',
endColorstr = '#4477a1' )";
}

背景色透明

#rgba p {
/* other browsers */
background: rgba( 98, 135, 167, .4 );
/* IE */
filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#886287a7',
endColorstr = '#886287a7' );
}

多背景

#multi-bg {
/* other browsers */
background:url(../images/Yomi.jpg) center center no-repeat,
url(../images/body_bg.gif) top left repeat-x;
/* IE */
backrgound:transparent url(../../../images/Yomi.jpg) center center no-repeat;
/* IE6-8 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/body_bg.gif',sizingMethod='crop')
/* IE8 only */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src = '../images/body_bg.gif', sizingMethod = 'crop')";
}

旋转

#rotate {
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-moz-transform: rotate(180deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 2); /* IE */
}

备注:IE 系列采用滤镜必须配合background属性一起使用filter才有效,另外在IE6、IE7中还须配合width/height,filter放可生效。

用IE滤镜实现的一些特效的更多相关文章

  1. PS滤镜制作下雨照片特效

    原图 一.打开你想要添加下雨效果的照片,并新建一个图层,命名为雨,填充为黑色,对“雨”层执行:滤镜 > 杂色> 添加杂色,参数如图. 二.对“雨”层执行:滤镜 > 模糊 > 高 ...

  2. 你值得拥有的Mac PS滤镜插件和特效处理软件合集,不要错过!

    以下几款是Mac上强大的Photoshop滤镜插件和特效,可以让我们更加高效率的使用PS,设计和处理出精美的图片. 1. Alien Skin Eye Candy Eye Candy是一款强大酷炫的P ...

  3. 【强大精美的PS特效滤镜合集】Alien Skin Eye Candy for Mac 7.2.2.20

    [简介] Alien Skin Eye Candy for Mac 7.2.2 版本,支持最新的PhotoShop CC 2019.2018等版本,这是一款强大酷炫的PS特效滤镜合集,具有32种滤镜和 ...

  4. Python: PS 滤镜--水波特效

    本文用 Python 实现 PS 滤镜中的 水波特效 import numpy as np from skimage import img_as_float import matplotlib.pyp ...

  5. Python: PS 滤镜--碎片特效

    本文用 Python 实现 PS 滤镜中的碎片特效,这个特效简单来说就是将图像在 上,下,左,右 四个方向做平移,然后将四个方向的平移的图像叠加起来做平均.具体的效果图可以参考之前的博客 http:/ ...

  6. Android——界面特效 相关知识总结贴

    帮助android UI实现动画特效 http://www.apkbus.com/android-79595-1-1.html 帮助android应用程序实现动画特效 http://www.apkbu ...

  7. Python: PS 滤镜--素描

    本文用 Python 实现 PS 滤镜中的素描特效,具体的算法原理和效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/details/386 ...

  8. Python: PS滤镜--径向模糊

    本文用 Python 实现 PS 滤镜中的径向模糊特效,具体的算法原理和效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/details/3 ...

  9. Python: PS 滤镜--高反差保留 (High pass)

    本文用 Python 实现 PS 滤镜中的 高反差保留 特效,具体的算法原理和图像效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/deta ...

随机推荐

  1. MySQL工作经验

    以下是根据工作中遇到各种场景用到的一些Mysql用法,比较实用,基本是语法之外的一些东西. 修改账户密码 1.打开Mysql控制台,输入原密码: 2.输入以下语法:mysql> set pass ...

  2. JAVAOOP集合框架

    集合框架三大内容:对外的接口.接口的实现和对集合运算的算法 集合有三大类接口:List.Set.Map 共同点:都是集合接口,都可以用来存储很多对象 不同:Collection接口存储一组不唯一(允许 ...

  3. 天气预报api-汇总

    和风天气 https://www.heweather.com/

  4. composer安装教程(Linux版)

    composer 是款不错的工具,那么如何进行安装composer呢 如果您是linux系统或是mac系统 请先确定是否安装了curl linux安装curl   1 yum install -y c ...

  5. PHP生成特定长度的纯字母字符串

    PHP中,md5().uniqid()函数可以返回32位和13位不重复的字符串,但是这些字符串都可能包含有数字.如果需要纯字母的字符串,而且长度不定,比如8位,那么直接用这两个函数无法达到效果. 这时 ...

  6. NOI P1896 互不侵犯 状压DP

    题目描述 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 注:数据有加强(2018/4/25) ...

  7. python QQ邮件发送邮件

    # -*- coding: UTF-8 -*- import smtplib from email.mime.text import MIMEText from email.header import ...

  8. Python 装饰器执行顺序迷思

    Table of Contents 1. 探究多个装饰器执行顺序 1.1. 疑问 1.2. 函数和函数调用的区别 1.3. 装饰器函数在被装饰函数定义好后立即执行 1.4. 疑问的解释 2. 参考资料 ...

  9. TouTiao开源项目 分析笔记9 实现一个问答主页面

    1.根据API返回创建几个基础的Bean 1.1.WendaArticleDataBean类 API返回的数据如下: /** * cell_type : 36 * extra : {"wen ...

  10. PHP.35-TP框架商城应用实例-后台11-商品分类-删除分类(2种方法)、添加、修改

    删除分类 删除一个分类的同时,其所有子分类都删除 在控制器CategoryCtroller.class.php中添加删除函数(delete) 在分类模型中添加钩子函数_before_delete()[ ...