.box{padding-top:50px;width:410px;margin:0 auto;}.clock{position:relative;width:400px;height:400px;border:5px solid #fff;border-radius:200px;background:-webkit-radial-gradient(center center,circle,#fff,#bbb);box-shadow:1px 1px 30px rgba(0,0,0,0.8);}.clock .clock-xin{position:absolute;top:50%;left:50%;width:30px;height:30px;border-radius:15px;background:#eee;margin:-15px 0 0 -15px;}.clock .clock-xin2{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:6px;background:#f00;z-index:100;margin:-6px 0 0 -6px;}.clock .date{position:absolute;z-index:3;top:245px;left:130px;font-size:20px;color:#000;text-shadow:1px 1px white;}.clock .hour{position:absolute;z-index:3;top:50%;left:50%;width:160px;height:6px;border-radius:5px;background:#000;-webkit-transform-origin:10px 50%;margin:-3px 0 0 -10px;}.clock .min{position:absolute;z-index:4;top:50%;left:50%;width:180px;height:4px;border-radius:5px;background:#333;-webkit-transform-origin:10px 50%;margin:-2px 0 0 -10px;}.clock .sec{position:absolute;z-index:5;top:50%;left:50%;width:210px;height:2px;background:#f00;-webkit-transform-origin:30px 50%;margin:-1px 0 0 -30px;}.clock em{display:block;width:2px;height:5px;background:#000;position:absolute;top:0;left:0;-webkit-transform-origin:50% 0;margin-left:-1px;}.clock em.ishour{width:6px;height:10px;margin-left:-3px;}.clock em.ishour i{font-size:25px;color:#000;position:absolute;top:12px;left:-7px;text-shadow:1px 1px white;}