一、兼容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. react获取url查询参数

    继承自React.Component的this.props.location.query对象下有当前url的各种查询参数.简单的例子:在控制台打印这个对象 import React from 'rea ...

  2. Java中String类的常用方法

    判断功能的方法 public boolean equals (Object anObject) :将此字符串与指定对象进行比较. public boolean equalsIgnoreCase (St ...

  3. 测试模式 windows2008 内部版本7601

    win server 2008 r2 enterprise 64位系统. 最近手贱,对服务器进行了一下更新,结果傻叉了,这是什么鬼,明明显示已经激活的,但就是有这么一串碍眼的字幕. 电脑右下角居然出现 ...

  4. IDEA中使用Database管理工具

    以下内容来自我的知乎回答IntelliJ IDEA中有什么让你相见恨晚的技巧? 说个冷门的,用IDEA操作数据库. 可能大部分不知道,IDEA是自带数据库管理工具的,类似于一个小型Navicat. 具 ...

  5. apicloud 注意事项

    页面布局时头部和内容一定要分开,状态栏寖入式要用.可以用api.sendEvent广播出去,api.addlisterten监听. api.openWin打开页面会有黑色闪屏,加bgColor:'#f ...

  6. S-HR系统流程

  7. Linux 系统查看命令

    1. linux CPU大小cat /proc/cpuinfo |grep "model name" && cat /proc/cpuinfo |grep &quo ...

  8. Golang Gin实践 番外 请入门 Makefile

    Golang Gin实践 番外 请入门 Makefile 原文地址:Golang Gin实践 番外 请入门 Makefile 前言 含一定复杂度的软件工程,基本上都是先编译 A,再依赖 B,再编译 C ...

  9. canvas实现圆框图片

    作者:issac_宝华链接:http://www.jianshu.com/p/9a6ee2648d6f來源:简书 在html中做圆框图片很容易,只需要简单的 border-radius: 50%; 当 ...

  10. String Boot-thymeleaf使用(四)

    简介 Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本.,可以完全替代jsp,也是spring boot官方推荐 ...