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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
document.all与WEB标准
2020/05/13 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
Vue自定义指令详解
2017/07/28 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
python Flask实现restful api service
2017/12/04 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Python文件操作基础流程解析
2020/03/19 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
幼儿园中秋节活动方案
2014/02/06 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
感恩之星事迹材料
2014/05/03 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
详细介绍python类及类的用法
2021/05/31 Python
微信小程序调用python模型
2022/04/21 Python
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技