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 选择器 属性选择器介绍
Jan 21 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 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
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
php图像处理类实例
2015/07/28 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
JS实现滑动插件
2020/01/15 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
Python操作SQLite简明教程
2014/07/10 Python
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
python文件写入write()的操作
2019/05/14 Python
用pycharm开发django项目示例代码
2019/06/13 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
《再别康桥》教学反思
2014/02/12 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
小学教师教学随笔
2015/08/14 职场文书