css3属性兼容性
来自:http://www.cnblogs.com/woleicom/p/4111030.html
css3属性兼容性
/*圆角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 */
}
备注上说的配合js原理如下
在你的html页中引入
<script type="text/javascript" src="assets/plugins/curvycorners.js"></script><!--兼容IE6以上圆角属性-->
$(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><!–浏览器不支持脚本时的css文件路径–>-->
<![endif]- ->
css3属性兼容性的更多相关文章
- 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 ...
- 实用的CSS3属性和使用技巧
CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...
- H5、CSS3属性的支持性以及flex
一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...
- 移动端 几个css3属性的练习
转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heigh ...
- CSS3属性box-shadow使用教程
CSS3的box-shadow属性可以让我们轻松实现图层阴影效果.我们来实战详解一下这个属性. 1. box-shadow属性的浏览器兼容性先来看一个这个属性的浏览器兼容性: Opera: 不知道是从 ...
- CSS3属性box-shadow使用教程,css3box-shadow
CSS3的box-shadow属性可以让我们轻松实现图层阴影效果.我们来实战详解一下这个属性. 1. box-shadow属性的浏览器兼容性先来看一个这个属性的浏览器兼容性: Opera: 不知道是从 ...
- CSS3实现兼容性的渐变背景效果
一.CSS3实现兼容性渐变背景效果,兼容FF.chrome.IE 渐变效果,现在主流的浏览器FF.Chrome.Opera.IE8+都可以通过带有私有前缀的CSS3属性来轻松滴实现渐变效果,IE7及以 ...
- CSS3属性详解(图文教程)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一 ...
- 如何用javascript获取和设置css3属性
==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); c ...
随机推荐
- Python实例属性限制(__slots__)
Python的动态绑定可以在程序运行的过程中对实例或class加上功能,但是如果我们想要限制实例的属性怎么办呢?更改内容请参考:Python学习指南 正常情况下,当我们定义了一个class,创建了一个 ...
- JavaScript数组的一些奇葩行为
今天,复习了一下JavaScript的数组,然后,把他的一些奇葩行为总结了一下,在这里和大家share一下,如果有不对的地方,欢迎指出! 奇葩1:Array()构造器函数可以不使用new关键字进行调用 ...
- 服务网关Zuul
路由+过滤器 = Zuul 核心是一系列的过滤器 Zuul的四种过滤器API 前置(PRE) 后置(POST) 路由(Route) 错误(Error) Zuul组织架构图 二.Zuul的使用 1 创建 ...
- Flume 高可用配置案例+load balance负载均衡+ 案例:日志的采集及汇总
高可用配置案例 (一).failover故障转移 在完成单点的Flume NG搭建后,下面我们搭建一个高可用的Flume NG集群,架构图如下所示: (1)节点分配 Flume的Agent和Colle ...
- linux系统中安装JDK 查看安装的ava版本
一.安装JDK 1.在/usr/目录下创建java目录 [root@localhost ~]# mkdir/usr/java[root@localhost ~]# cd /usr/java 2.下载j ...
- js switch 函数类型 序列化 转义
switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; } 函数 func ...
- C#实现根据日期计算星期
/// <summary> /// 根据日期返回 星期(返回结果为英文) /// </summary> /// <param name="date"& ...
- 在Python中进行自动化单元测试的教程
From: https://www.jb51.net/article/64119.htm 一.软件测试 大型软件系统的开发是一个很复杂的过程,其中因为人的因素而所产生的错误非常多,因此软件在开发过程必 ...
- 关于Javascript闭包(Closure)
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域 ...
- 用windows自带的ftp.exe实现断点续传的方法
摘自http://www.jb51.net/article/10604.htm 动画下载地址: http://www.chinesehack.org/soft/book/goonftp-jc.rar ...