Html
    Css
    Js

    
                        
 * {
	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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3实现网页电子时钟

0