IE之css3效果兼容
一、兼容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那么该值无效。
IE之css3效果兼容的更多相关文章
- html5 +css3 点击后水波纹扩散效果 兼容移动端
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 8个前沿的 HTML5 & CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
- CSS 实现图片灰度效果 兼容各种浏览器
CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...
- 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- 发现两个有趣的CSS3效果
一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...
- 精选12个时尚的 CSS3 效果【附源码下载】
这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...
- 让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
- 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 颗粒翻页(css3效果展示)
用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...
随机推荐
- react获取url查询参数
继承自React.Component的this.props.location.query对象下有当前url的各种查询参数.简单的例子:在控制台打印这个对象 import React from 'rea ...
- Java中String类的常用方法
判断功能的方法 public boolean equals (Object anObject) :将此字符串与指定对象进行比较. public boolean equalsIgnoreCase (St ...
- 测试模式 windows2008 内部版本7601
win server 2008 r2 enterprise 64位系统. 最近手贱,对服务器进行了一下更新,结果傻叉了,这是什么鬼,明明显示已经激活的,但就是有这么一串碍眼的字幕. 电脑右下角居然出现 ...
- IDEA中使用Database管理工具
以下内容来自我的知乎回答IntelliJ IDEA中有什么让你相见恨晚的技巧? 说个冷门的,用IDEA操作数据库. 可能大部分不知道,IDEA是自带数据库管理工具的,类似于一个小型Navicat. 具 ...
- apicloud 注意事项
页面布局时头部和内容一定要分开,状态栏寖入式要用.可以用api.sendEvent广播出去,api.addlisterten监听. api.openWin打开页面会有黑色闪屏,加bgColor:'#f ...
- S-HR系统流程
- Linux 系统查看命令
1. linux CPU大小cat /proc/cpuinfo |grep "model name" && cat /proc/cpuinfo |grep &quo ...
- Golang Gin实践 番外 请入门 Makefile
Golang Gin实践 番外 请入门 Makefile 原文地址:Golang Gin实践 番外 请入门 Makefile 前言 含一定复杂度的软件工程,基本上都是先编译 A,再依赖 B,再编译 C ...
- canvas实现圆框图片
作者:issac_宝华链接:http://www.jianshu.com/p/9a6ee2648d6f來源:简书 在html中做圆框图片很容易,只需要简单的 border-radius: 50%; 当 ...
- String Boot-thymeleaf使用(四)
简介 Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本.,可以完全替代jsp,也是spring boot官方推荐 ...