CSS3画苹果手机
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>手机CSS3</title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0;} 8 #phone{width: 275px;height: 500px;border: 10px solid #3B3B3B;border-radius: 30px;margin: 10px auto; 9 background:#2E2E2E;} 10 11 .sxt{ 12 width: 12px;height: 12px; 13 background: #1A1A1A;border-radius: 50%; 14 border: 3px solid #505050;margin: 10px auto; 15 } 16 .tingtong{ 17 width: 80px;height: 10px; 18 border: 3px solid #505050;background: #1A1A1A; 19 border-radius: 10px;margin: 14px auto; 20 } 21 .screen{ 22 height: 350px;width: 240px;background: #0A0A0A;border: 3px solid #1C1C1C;margin: 10px auto; 23 } 24 .btn{ 25 width: 40px;height: 40px;background: #1A1A1A;border-radius: 50%;margin: 10px auto; 26 } 27 .btn:before{ 28 width: 20px;height: 20px;border: 2px solid #ffffff; 29 border-radius: 30%;content:""; 30 display: inline-block;margin-top: 8px;margin-left: 8px; 31 } 32 </style> 33 </head> 34 <body> 35 <div id="phone"> 36 <div class="sxt"></div> 37 <div class="tingtong"></div> 38 <div class="screen"></div> 39 <div class="btn"></div> 40 </div> 41 </body> 42 </html>
