css3.0新属性效果在ie下的解决方案


Posted in HTML / CSS onMay 10, 2010

css3.0增加的新属性,如投影、渐变、旋转、圆角等等!这些新标准属性在ie6、ie7、ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的。目前ie6、ie7、ie8浏览器不支持这些属性并不能说明ie就实现不了css3.0新属性的效果!css3please.com网站为我们收集整理了一些css3.0新属性效果在ie下的解决方案!

.box_round { -moz-border-radius: 12px; /* FF1+ */ -webkit-border-radius: 12px; /* Saf3+, Chrome */ border-radius: 12px; /* Opera 10.5, IE 9 */ }

.box_shadow { -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */ -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */ box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */ }

.box_gradient { background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */ }

.box_rgba { background-color: #B4B490; background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')"; /* IE8 */ }

.box_rotate { -moz-transform: rotate(7.5deg); /* FF3.5+ */ -o-transform: rotate(7.5deg); /* Opera 10.5 */ -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */ filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)"; /* IE8 */ zoom: 1; }

.box_transition { -moz-transition: all 0.3s ease-out; /* FF3.7+ */ -o-transition: all 0.3s ease-out; /* Opera 10.5 */ -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ }
/* */@font-face { font-family: 'WebFont'; src: url('myfont.eot'); /* IE6+ */ src: local('☺'), url('myfont.woff') format('woff'), /* FF3.6 */ url('myfont.ttf') format('truetype'); /* Saf3+,Chrome,FF3.5,Opera10+ */ }

/*
btw- up/down keys work, along with your mouse wheel. ;)
coming soon.. extra css transforms (skew, scale), text-shadow and more.
plz leave feedback here.

Notes:
+ Multiple IE filters must be comma delimited in a single declaration. They are not additive in separate blocks.
+ The closest thing to box-shadow for IE is Blur with makeShadow but you need a duplicate div.

© 2010; a Paul Irish and Jonathan Neal joint, in association w/ Boaz Sender and Zoltan Hawryluk.

if you like this, you'll probably also dig yayQuery. <3
*/

HTML / CSS 相关文章推荐
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
CSS3 开发工具收集
Apr 17 #HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 #HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 #HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 #HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 #HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 #HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 #HTML / CSS
You might like
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
基于empty函数的判断详解
2013/06/17 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
Python列表切片操作实例总结
2019/02/19 Python
Python socket处理client连接过程解析
2020/03/18 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
物业公司采购员岗位职责
2013/12/31 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
纪检监察建议书
2014/05/19 职场文书
公司总经理岗位职责
2015/04/01 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android