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 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 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环境搭建最新方法
2006/09/05 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
职工运动会邀请函
2014/01/19 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
小浪底导游词
2015/02/12 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
入党自荐书范文
2015/03/05 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js