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的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
php xml常用函数的集合(比较详细)
2013/06/06 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
python实现html转ubb代码(html2ubb)
2014/07/03 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python实现换位加密算法的示例
2018/10/14 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
Python Gitlab Api 使用方法
2019/08/28 Python
wxpython绘制圆角窗体
2019/11/18 Python
详解Python 函数参数的拆解
2020/09/02 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
高中运动会广播稿
2014/01/21 职场文书
厨房管理计划书
2014/04/27 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书