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 相关文章推荐
总结30个CSS3选择器
Apr 13 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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生成静态页面详解
2006/12/05 PHP
php简单静态页生成过程
2008/03/27 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
浅析vue深复制
2018/01/29 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
Python获取脚本所在目录的正确方法
2014/04/15 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
ipad上运行python的方法步骤
2019/10/12 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
开业主持词
2014/03/21 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
2015年教师节慰问信
2015/03/23 职场文书
居委会工作总结2015
2015/05/18 职场文书