一、兼容css阴影效果(ie滤镜)

1.Shadow,阴影

.shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000;

/* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

/* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; }

  • Color,设置阴影颜色。

  • Direction,设置阴影的方向,角度也是从0°~315°取值(跟PS的投影效果非常的相似。)

  • Strength,设置投影强度,数值越大越模糊。

2.Gradient,渐变

filter:progid:DXImageTransform.Microsoft.Gradient()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Gradient(enabled='ture',GradientType='1',StartColorStr='#00000000',EndColorStr='#FFFF3300')

3.Alpha,调整对象内容的不透明度

filter:progid:DXImageTransform.Microsoft.Alpha()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Alpha(enabled='ture',GradientType='1',StartColorStr='#00000000',EndColorStr='#FFFF3300')

4.Blur,设置对象的模糊值

filter:progid:DXImageTransform.Microsoft.Blur()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='x', MakeShadow='x', ShadowOpacity='x')

  • PixelRadius,设置对象的模糊半径,1~100数值。

  • MakeShadow,设置对象是否投影,布尔值,true和false

  • ShadowOpacity,设置对象投影不透明度,0.0~1.0,假如MakeShadow为false那么该值无效。

链接地址:https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532853(v=vs.85)

IE之css3效果兼容的更多相关文章

  1. html5 +css3 点击后水波纹扩散效果 兼容移动端

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  3. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  4. 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  5. 发现两个有趣的CSS3效果

    一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...

  6. 精选12个时尚的 CSS3 效果【附源码下载】

    这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...

  7. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  8. 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 颗粒翻页(css3效果展示)

    用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...

随机推荐

  1. Ubuntu 16.04安装和卸载软件命令

    安装软件 apt-get install softname1 softname2 softname3…… 卸载软件 apt-get remove softname1 softname2 softnam ...

  2. Swiper 3D flow轮播使用方法

    swiper 的3d轮播效果,移动端适用 (1). 如需使用Swiper的3d切换首先加载3D flow插件(js和css). <head> <link rel="styl ...

  3. PS学习列表

    1 去水印 祛痘 祛斑 2 新建画布,素材拖到ps中,图层 3 钢笔抠图,直线点,圆弧拖,遇到拐角按alt,ctrl+回车键将扣的图变为选区,ctrl+j复制一层上来 4 证件照换底

  4. 单链表每k个节点为一组进行反转(最后不满k个时不反转)

    public class LinkReverse2 { public static Node mhead=null; public static Node mtail=null; public sta ...

  5. Python统计字符串中出现次数最多的人名

    人名最多数统计题目摘自https://python123.io 描述编程模板中给出了一个字符串,其中包含了含有重复的人名,请直接输出出现最多的人名.‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬ ...

  6. js 中this到底指向哪里?

    其实js的this指向很简单.我们记住下面3种情况. this 指向的是浏览器中的window.代码如下: function fn(){ this.name='yangkun'; this.age=2 ...

  7. Linux思维导图之进程管理

    查漏补缺,理解概念,及时总结,欢迎拍砖.

  8. Linux 中, 安装html转pdf工具:wkhtmltopdf

    wkhtmltopdf下载地址官网:https://wkhtmltopdf.org/downloads.html 进入到/opt文件夹下面,新建文件夹wkhtmltopdf,然后把下载好的wkhtml ...

  9. CentOS7安装Kubernetes

    CentOS7安装Kubernetes 安装Kubernetes时候需要一台机器作为管理机器,1台或者多台机器作为集群中的节点. 系统信息: Hosts: 请将IP地址换成自己环境的地址. cento ...

  10. IntelliJ IDEA 和 webstorm更换主题

    1. 搜索http://color-themes.com/?view=index 2. 查找自己喜欢的主题,下载 3. 放在安装位置(个人习惯,放在哪都行,能找到就行) 4. 然后打开importSe ...