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>
苹果手机CSS3