html网页电子时钟的设计,css3实现网页电子时钟

* {

margin:0;

padding:0;

}

ul,li {

list-style:none;

}

body {

background:radial-gradient(#eeefef,#d6d7d9);

padding:50px;

}

.box {

width:540px;

height:200px;

margin:50px auto;

}

.box ul li {

width:150px;

height:160px;

border:1px solid #9fa2ad;

display:inline-block;

margin-right:10px;

text-align:center;

border-radius:5px;

box-shadow:inset 0 -2px 0 #f1f1f1,0 1px 0 #f1f1f1,0 2px 0 #9fa2ad,0 3px 0 #f1f1f1,0 4px 0 #9fa2ad;

background:-webkit-linear-gradient(top,rgba(248,248,248,.3) 20%,rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%,rgba(248,248,248,.2) 90%);

position:relative;

}

.box li span:first-child {

font-size:120px;

color:#52555a;

display:block;

height:130px;

line-height:150px;

}

.box li:before,.box li:after {

display:block;

content:"";

position:absolute;

width:150px;

}

.box li:before {

top:50%;

height:1px;

box-shadow:0 1px 0 #868995,0 2px 1px #fff;

}

.box li:after {

bottom:-65px;

height:60px;

border-radius:0 0 5px 5px;

background:-webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)));

background:-webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));

background:linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));

z-index:1;

}