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制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 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
基于mysql的论坛(3)
2006/10/09 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
Javascript - HTML的request类
2006/07/15 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python程序设计入门(5)类的使用简介
2014/06/16 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python中的tuple元组详细介绍
2015/02/02 Python
python实现人民币大写转换
2018/06/20 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Python 使用多属性来进行排序
2019/09/01 Python
浅谈Python3中print函数的换行
2020/08/05 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
执行总经理岗位职责
2014/02/03 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
毕业生就业协议书
2014/04/11 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
Django如何与Ajax交互
2021/04/29 Python
基于Redis延迟队列的实现代码
2021/05/13 Redis
详细了解MVC+proxy
2021/07/09 Java/Android