/*圆角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. CODE[VS]-最小数和最大数-整数处理-天梯青铜

    题目描述 Description 输入n个数,n<=100,找到其中最小的数和最大的数 输入描述 Input Description 第一行一个整数n 接下来一行n个整数,每个整数不超过231 ...

  2. 项目中处理android 6.0权限管理问题

    android 6.0对于权限管理比较收紧,因此在适配android 6.0的时候就很有必要考虑一些权限管理的问题. 如果你没适配6.0的设备并且权限没给的话,就会出现类似如下的问题: java.la ...

  3. USACO 3.3 Shopping Offers

    Shopping OffersIOI'95 In a certain shop, each kind of product has an integer price. For example, the ...

  4. CentOS python升级到3.5时yum报错

    File except KeyboardInterrupt, e: ^ SyntaxError: invalid syntax 解决步骤: #vi /usr/bin/yum 将#!/usr/bin/p ...

  5. NVIC

    1中断:每一个中断都会对应一个服务程序 2NVIC 他的做用是负责中断优先级管理 3IP bit[7:4]每一个中断都有一个IP寄存器,用于设置中断相关的属性 AIRCR[10:8]只一个AIRCR寄 ...

  6. pageoffice razor pageofficelink方式调用js实现操作文档

    用官方的开发者帮助文档即可,在后台实例化时一定要将pageofficecontrol控件的id属性定义,然后在前台通过定义的id属性来调用相应的方法

  7. ip地址分类和网段区分

    IP地址分类/IP地址10开头和172开头和192开头的区别/判断是否同一网段 简单来说在公司或企业内部看到的就基本都是内网IP,ABC三类IP地址里的常见IP段. 每个IP地址都包含两部分,即网络号 ...

  8. 7. Shell 函数

    1. 格式 [ function ] funname [()] { action; [return int;] } 可以带function fun() 定义,也可以直接fun() 定义,不带任何参数 ...

  9. date格式化

    Linux: [ghsea@localhost ~]date +%Y:%m:%d [ghsea@localhost ~]date +%Y-%m%d [ghsea@localhost ~]date +% ...

  10. C# lesson2

    一.C#数据类型 1.值类型 包括数据相关(short.long.int .double.float).布尔(bool).枚举 2.引用类型 Object .对象.数组.字符串 二.存储方式 值类型 ...