/*圆角class,需要设置圆角的元素加上class名称*/
.roundedCorners{
-webkit-border-radius: 10px;/*webkit内核浏览器*/
-moz-border-radius: 10px;/*moz内核浏览器*/
border-radius:20px;/*直接支持css3圆角属性的浏览器(如IE10)*/
}/*配合js使用*/
/*透明度class,需要设置透明度的元素加上class名称*/
.transparent{
-webkit-opacity:0.3;
-moz-opacity:0.3;
opacity: 0.3;
filter:alpha(opacity=30); /*for IE 6,7,8*/
}
/*盒阴影class,需要设置阴影的元素加上class名称(注:IE9上圆角显示有出处,IE8上圆角和透明度属性会无效,IE7上透明度属性会无效)*/
.boxShadow{
-webkit-box-shadow:5px 5px 5px #000;
-moz-box-shadow:5px 5px 5px #000;
box-shadow:5px 5px 5px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000');/* For IE6,7,8 */
}
/*CSS3字体扩展之兼容写法
*
*/
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
/*CSS3 2D 转换 旋转 rotate()方法:元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。(按中心旋转)
*不支持IE9以下
*/
.transformRotate{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
/*CSS3 2D 转换 移动 translate()方法:元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
*不支持IE9以下
*/
.transformTranslate{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
/*CSS3 2D 转换 缩放 scale()方法:元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
*不支持IE9以下
*/
.transformScale{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
/*CSS3 2D 转换 组合 matrix()方法:matrix() 方法把所有 2D 转换方法组合在一起。
*matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
*不支持IE9以下
*/
.transformMatrix{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

其中有很详细备注,还有一点要说的是css的圆角不光只是设置css属性,还有js部分,以下是解说

备注上说的配合js原理如下

在你的html页中引入

<script type="text/javascript" src="assets/plugins/curvycorners.js"></script><!--兼容IE6以上圆角属性-->
curvycorners.js网上查下吧,这里就不给链接了!
再在你的js文件里写上:
$(function () {
addEvent(window, 'load', initCorners);/*IE9及以下版本的CSS3圆角属性兼容代码*/
function initCorners() {
var setting = {
tl: {radius: 20},
tr: {radius: 20},
bl: {radius: 20},
br: {radius: 20},
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");/*绑定需要生成圆角的元素*/
}
})

如果要绑定多个元素就可以这样写:

curvyCorners(setting, ".roundedCorners1");
curvyCorners(setting, ".roundedCorners2");
curvyCorners(setting, ".roundedCorners3");

让IE低版本兼容css3伪标签:
<!- -[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="bower_components/selectivizr/selectivizr.js"></script><!--兼容IE对CSS3伪类和属性选择器的支持(详细支持列表请看explanation/说明images/selectivizr旋转器列表.png)-->
<!--<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>&lt;!&ndash;浏览器不支持脚本时的css文件路径&ndash;&gt;-->
<![endif]- ->

其支持的伪标签:

同样文件自己百度吧!

让IE支持HTML5已定义标签:

 <!-[if IE]>
<script src="assets/plugins/html5.js"></script>
<![endif]->
<!--
网络连接html5.js地址
http://html5shiv.googlecode.com/svn/trunk/html5.js
简化版html5.js文件内容
<!–[if IE]>
<script>
(function(){if(e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(’,'),i=e.length;while(i–){document.createElement_x(e[i])}})()
</script>
<![endif]–>
-->
												




											

css3部分属性兼容性别扭写法(因为很多我就叫他别扭了,希望全面早早支持css3吧)的更多相关文章

  1. css3属性兼容性

    来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedC ...

  2. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  3. PIE使IE浏览器支持CSS3属性(圆角、阴影、渐变)

    http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...

  4. web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  5. 让IE6IE7IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  6. 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  7. 深入了解——CSS3新增属性

    CSS3 选择器(Selector) 写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: 清单 1. C ...

  8. 让IE6/IE7/IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  9. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

随机推荐

  1. 使用VSTS/TFS搭建iOS持续集成环境

    TFS 自2015版开始支持跨平台的持续集成环境,通过提供开源的build agent为 Windows / linux / macOS 提供了统一的持续集成环境管理能力.这篇文章给大家介绍一下如何使 ...

  2. Oracle学习系列3

    Oracle学习系列3 ************************************************************************************ 多表查 ...

  3. Linux 修改swap虚拟内存大小

          swap是内存的交换区:换句话说,如果内存不够用了,那么系统会在硬盘上存储一些内存中不常用的数据,之后将这部分数据在存储中析构掉:这样内存就又有剩余空间可以运行东东啦,这个过程也就是所谓的 ...

  4. JLOI 2013 卡牌游戏

    问题描述: N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字为X,则庄家首先 ...

  5. ununtu卸载软件

    sudo apt-get remove vim

  6. LightOj_1027 A Dangerous Maze

    题目链接 题意: 你在一个迷宫里, 开始的时候你面前有n个门, 选择每个门的概率相等, 有两种结果: 1)回到|x|分钟之前(x为负时) 2)x分钟之后出迷宫(x为正时) 每次回到|x|分钟之前, 你 ...

  7. ajax 大洋与小样的第二步

    一.Ajax的对象 XMLHttpRequest的方法 方法 描述 abort() 停止当前请求 getAllResponseHeaders() 把 HTTP请求的所有响应首部作为健/值对返回 get ...

  8. 【项目记录】-路灯监测 gmap.net

    需求 2016年5月,客户要求在地图上显示路灯及数据,分析数据生成报表,以便查看分析路灯情况. 选型 国外项目就不考虑国内的地图了,开始想使用google的web地图,考虑到地图上标记物过多影响性能及 ...

  9. 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性)

    一. 简介 上一个章节中,也介绍了立即加载和延迟加载,但上一个章节是针对单表而言的,不含外键,立即也好,延迟也好,都是指单表中的数据.但本章节重点介绍的三种加载方式均是针对含(导航属性.外键)的情况下 ...

  10. cartographer 分析

    原文链接:http://blog.csdn.net/zyh821351004/article/details/52421005 cartographer与karto的比较 1. 两者采取的都是图优化框 ...