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 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
CSS的class与id常用的命名规则
May 18 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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
php中变量及部分适用方法
2008/03/27 PHP
php对数组排序代码分享
2014/02/24 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
$.ajax json数据传递方法
2008/11/19 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
JS在if中的强制类型转换方式
2018/07/15 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
使用python实现飞机大战游戏
2020/03/23 Python
django使用graphql的实例
2020/09/02 Python
Python字典实现伪切片功能
2020/10/28 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
几个判断型的面试题
2012/07/03 面试题
深圳茁壮笔试题
2015/05/28 面试题
机械工程师求职自我评价
2013/09/23 职场文书
企业员工培训感言
2014/02/26 职场文书
协议书范本
2014/04/23 职场文书
Django框架中表单的用法
2022/06/10 Python