<! DOCTYPE html> "en -US">"Content-type"Content="text/html; Charset=utf-8"> <meta charset="UTF-8"> <title> a CSS3 making personality web Clock 丨 Cinema Chair |kiddy seat </title> <style type="Text/css">body,ul,li{padding:0; Margin:0; } a {Color:rgb (1,124,185); Text-Decoration:none; } body{Font-size:16px; Color: #5a5d63; Background: #d6d7d9; Background:-webkit-radial-gradient (#eeefef, #d6d7d9); Background:-moz-radial-gradient (#eeefef, #d6d7d9); Background:-o-radial-gradient (#eeefef, #d6d7d9); Background:-ms-radial-gradient (#eeefef, #d6d7d9); Background:radial-gradient (#eeefef, #d6d7d9); padding:50px; }. box{width:540px; height:200px; margin:50px Auto; }. Box li{position:relative; Text-Align:center; List-style-Type:none; Display:inline-Block; width:150px; height:160px; Text-shadow:02px 1px #f4f4f4; border:1px solid #9fa2ad; Border-radius:5px; Margin-right:10px; Background:-webkit-gradient (Linear,0 0,0 -%, Color-stop (.2, Rgba (248,248,248,.3)), Color-stop (.5, Rgba (168,173, the,.5)), Color-stop (.Wuyi, Rgba (168,173, the,.3)), Color-stop (.9, Rgba (248,248,248,.2))); Background:-webkit-linear-gradient (Top,rgba (248,248,248,.3) -%,rgba (168,173, the,.5) -%,rgba (168,173, the,.3)Wuyi%, Rgba (248,248,248,.2) -%); Background:-moz-linear-gradient (Top, RGBA (248,248,248,.3) -%,rgba (168,173, the,.5) -%,rgba (168,173, the,.3)Wuyi%, Rgba (248,248,248,.2) -%); Background:-o-linear-gradient (Top, RGBA (248,248,248,.3) -%, Rgba (168,173, the,.5) -%, Rgba (168,173, the,.3)Wuyi%, Rgba (248,248,248,.2) -%); Background:-ms-linear-gradient (Top, RGBA (248,248,248,.3) -%, Rgba (168,173, the,.5) -%, Rgba (168,173, the,.3)Wuyi%, Rgba (248,248,248,.2) -%); Background:linear-gradient (Top, RGBA (248,248,248,.3) -%, Rgba (168,173, the,.5) -%, Rgba (168,173, the,.3)Wuyi%, Rgba (248,248,248,.2) -%); Box-shadow:inset0-2px0#f1f1f1,01px0#f1f1f1,02px0#9fa2ad,03px0#f1f1f1,04px0#9fa2ad; }. Box Li:before,. Box li:after{Display:block; Content:""; Position:absolute; width:150px; }. Box li:before{top: -%; height:1px; Box-shadow:01px0#868995,02px 1px #fff; }. Box li:after{bottom:-65px; height:60px; Border-radius:0 05px 5px; Background:-webkit-gradient (Linear,0 0,0 -%, 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:-moz-linear-gradient (Top,rgba (0,0,0,.1), Rgba (0,0,0,0)); Background:-o-linear-gradient (Top,rgba (0,0,0,.1), Rgba (0,0,0,0)); Background:-ms-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}. Box Li Span:first-child{font:120px'Bitstreamverasansmonobold'; Color: #52555a; Display:block; height:130px; Line-height:150px; } @font-Face {font-family:'Bitstreamverasansmonobold'; Src:url ('Veramono-bold-webfont.eot'); Src:url ('veramono-bold-webfont.eot? #iefix') Format ('Embedded-opentype'), url ('Veramono-bold-webfont.woff') Format ('Woff'), url ('Veramono-bold-webfont.ttf') Format ('TrueType'), url ('Veramono-bold-webfont.svg#bitstreamverasansmonobold') Format ('svg'); Font-Weight:normal; Font-Style:normal; } </style> "Text-align:center;"><a href="#"target="_blank">css3 Making Clocks </a>class="Box"> <ul> <li><span id="Hour"></span><span>Hours</span></li> <li><span id="minute"></span><span>Minutes</span></li> <li><span id="Second"></span><span>Seconds</span></li> </ul> </div> <pclass="author"style="clear:both;padding-top:50px;text-align:center;line-height:1.625"> Toto-<a href="/"target="_blank">w3cplus</a><br> If you have any better suggestions or questions, please dabigatran:1041263</p> <script>varHour=document.getelementbyid ('Hour'); varMinute=document.getelementbyid ('minute'); varSecond=document.getelementbyid ('Second'); function ShowTime () {varOdate=NewDate (); varihours=odate.gethours (); varIminute=odate.getminutes (); varIsecond=odate.getseconds (); Hour.innerhtml=Addzero (ihours); Minute.innerhtml=Addzero (Iminute); Second.innerhtml=Addzero (Isecond); } showTime (); SetInterval (ShowTime, +); function Addzero (n) {if(n<Ten){ return '0'+N; } return "'+N; } </script> </body> A CSS3 make personalized web clock