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>
时间： 2024-10-06 12:27:09