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属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
css3新特性的应用示例分析
Mar 16 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php的dl函数用法实例
2014/11/06 PHP
form自动提交实例讲解
2017/07/10 PHP
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Django实现学员管理系统
2019/02/26 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
Python turtle库的画笔控制说明
2020/06/28 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
领导干部保密承诺书
2014/08/30 职场文书
搬迁通知
2015/04/20 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers