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中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
深入理解Vue 组件之间传值
2018/08/16 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
js实现简单扫雷
2020/11/27 Javascript
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
计算机操作自荐信
2013/12/07 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
话题作文之成长
2019/12/09 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang