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 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
HTML中的表单元素介绍
Feb 28 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
怎样声明接口
2014/09/19 面试题
大学生优秀的自我评价分享
2013/10/22 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
领导班子整改方案
2014/10/25 职场文书
技术员个人工作总结
2015/03/03 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
golang正则之命名分组方式
2021/04/25 Golang
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
详解Python魔法方法之描述符类
2021/05/26 Python