border-radius:兼容写法:
-moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
-webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
text-shadow:兼容写法:
text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
也就是:
text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...
或者
text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...
box-shadow兼容写法:
//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
Transform兼容写法:
//Mozilla内核浏览器:firefox3.5+
-moz-transform: rotate | scale | skew | translate ;
//Webkit内核浏览器:Safari and Chrome
-webkit-transform: rotate | scale | skew | translate ;
//Opera
-o-transform: rotate | scale | skew | translate ;
//IE9
-ms-transform: rotate | scale | skew | translate ;
//W3C标准
transform: rotate | scale | skew | translate ;
Transition兼容写法:多个属性同时使用,使用“,”分割
//Mozilla内核
-moz-transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
//Webkit内核
-webkit-transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
//Opera
-o-transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
//W3C 标准
transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
应用实例1、旋转的div层
Transition的完美应用,在div层初始化的时候使用transition:all 持续时间 使用函数。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0}
.test{height:100px;width:100px;margin-top:20px;background:#3388CC;
margin-left:20px;border-radius:3%;
-webkit-transition:all .8s ease-in-out;
-moz-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;}
.test:hover{
-webkit-transform:rotate(720deg);
-moz-transform:rotate(720deg);
-ms-transform:rotate(720deg);
-o-transform:rotate(720deg);
transform:rotate(720deg);
background:#FF9900;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
这个时候当鼠标移上div层的时候,在0.8s内div层会从0度旋转720角,且背景色由#3388CC变成#FF9900,且移除鼠标的时候,div层会从720度角旋转回0度,颜色会由#FF9900变回#3388CC。
如果不考虑移除时回转,可以利用Animation实现:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../../jQuery/jquery-1.9.1.js"></script>
<style type="text/css">
*{margin:0;padding:0}
.test{height:100px;width:100px;margin-top:20px;background:#3388CC;
margin-left:20px;
-moz-border-radius:3%;
-webkit-border-radius:3%;
border-radius:3%;
}
@-moz-keyframes spinner{
from {
background:#3388CC;
}
to{
-moz-transform:rotate(720deg);
transform:rotate(720deg);
background:#FF9900;
}
}
@-webkit-keyframes spinner{
from {
background:#3388CC;
}
to{
-webkit-transform:rotate(720deg);
transform:rotate(720deg);
background:#FF9900;
}
}
@-o-keyframes spinner{
from {
background:#3388CC;
}
to{
-o-transform:rotate(720deg);
transform:rotate(720deg);
background:#FF9900;
}
}
.test:hover {
-moz-animation:spinner 1s ease-in-out;
-webkit-animation:spinner 1s ease-in-out;
-o-animation:spinner 1s ease-in-out;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>