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实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
详解CSS3浏览器兼容
Dec 24 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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中数组合并的两种方法及区别介绍
2012/09/14 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
浅谈js中的bind
2019/03/18 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
Python时间戳使用和相互转换详解
2017/12/11 Python
python之pandas用法大全
2018/03/13 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python二维码生成识别实例详解
2019/07/16 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
python用什么编辑器进行项目开发
2020/06/17 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
生产内勤岗位职责
2013/12/07 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
物业保安岗位职责
2014/07/02 职场文书
医院义诊活动总结
2014/07/04 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
2014年计生工作总结
2014/11/21 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript