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+jq创作含苞待放的荷花
Feb 20 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
html5 标签
Jul 16 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 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/12/14 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
destoon官方标签大全
2014/06/20 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
javascript知识点收藏
2007/02/22 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
loading动画特效小结
2017/01/22 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
美国在线购物频道:Shop LC
2019/04/21 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
开学寄语大全
2014/04/08 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
2014年内勤工作总结
2014/11/24 职场文书
活动新闻稿范文
2015/07/17 职场文书
文明礼貌主题班会
2015/08/14 职场文书
人民币使用说明书
2019/04/17 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python