用css3实现一个时钟的实例，运用知识有css3的border新属性半径和阴影。css3旋转，背景径向渐变，不同浏览器的兼容，相信做好了这个，css3属性对你就不难了。
下面给出思路已经主要代码的讲解和源码下载。
思路：
1、画一个圆，写一个div层，让其半径为50%，border-radius:50%;
2、以圆为父元素，画60个刻度，使用js循环创建60个div层，添加到父div上，设置宽高为刻度的大小
3、让60个div围着圆中心旋转，让其成为时钟的刻度，每个刻度旋转的角度是6是倍数（360 /60=6）
4、以圆心为中心，画三个div层，分别代表（秒针，分针，时针），大小设置好。
5、让秒针，分针，时针随着时间旋转，即是操作css样式的旋转transform:"rotate(动态传入角度)"
6、设置定时器，让每一秒钟，秒针，分针，时针就旋转一次，旋转的角度由当前时间算出来。
秒针转动一秒，即旋转为6度。分针转动一个刻度，即旋转为6度。，时钟= （当前的时间小时整数 * 30）+ （分钟*6/12）
下面我做好了一个实例，供大家参考，最好在谷歌浏览器下打开
点此下载
说明：
border-radius：设置圆的半径；
box-shadow：设置圆的阴影；
background:-webkit-gradient(radial,120 120,0,120 120,120,from(#ffe),to(#eee)); 针对webkit内核的浏览器设置背景径向渐变
background:-moz-radial-gradient(circle closest-side, #ffe 0%, #eee 100%); 针对firefox浏览器设置背景径向渐变
.one{
width:240px;height:240px;border:1px solid #888;
border-radius:50%;box-shadow:2px 2px 4px #111;
background:-webkit-gradient(radial,120 120,0,120 120,120,from(#ffe),to(#eee));
background:-moz-radial-gradient(circle closest-side, #ffe 0%, #eee 100%);
position:relative;
}
drawMark()函数，用来创建刻度，循环60次
function drawMark(obj)
{
for (var i=0; i<60; i++) {
var widths=3;
var heights=6;
if(i%5==0){
widths=5
heights=10;
}
var div=document.createElement("div");
div.style.cssText="width:"+widths+"px;height:"+heights+"px;background:#111;position:absolute;top:0;left:120px;"
setCss3(div,{transform:"rotate("+i*6+"deg)","transform-origin":"0px 120px"})
obj.appendChild(div);
}
}
drawPoint() 用来画秒针，分针，时针的
参数说明：obj代表那个圆的div层
startx,starty 表示画出的div距离父元素的位置。
width,height, 表示画出的div本身的宽和高
angle，旋转角度
function drawPoint (obj,startx,starty,width,height,color,angle)
{
var div=document.createElement("div");
div.style.cssText="width:"+width+"px;height:"+height+"px;position:absolute;top:"+starty+"px;left:"+startx+"px;background:"+color+";";
setCss3(div,{transform:"rotate("+angle+"deg)","transform-origin":"0px 0px"})
obj.appendChild(div);
return div;
}
setCss3 ()用来处理旋转的兼容性，因为旋转在各浏览器中写法不一
function setCss3 (obj,attrObj) {
for (var i in attrObj) {
var newi=i;
if(newi.indexOf("-")>0){
var num=newi.indexOf("-");
newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
}
obj.style[newi]=attrObj[i];
newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
obj.style["webkit"+newi]=attrObj[i];
obj.style["moz"+newi]=attrObj[i];
obj.style["o"+newi]=attrObj[i];
obj.style["ms"+newi]=attrObj[i];
}
}
