css3繪製蘋果手機

時間 2021-01-07 標籤 Css3

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Apple手機繪製</title> <style type="text/css"> #phone{ width: 250px; height: 500px; background: #2E2E2E; border: 10px solid #3B3B3B; margin: 100px auto; border-radius: 40px; } #sxt{ width: 6px; height: 6px; background: #1A1A1A; border-radius: 50%; border: 3px solid #505050; margin: 10px auto; } #tingtong{ width: 80px; height: 9px; border: 3px solid #505050; background: #1A1A1A; margin: 10px auto; border-radius: 10px; } #screen{ width: 230px; height: 390px; background: #0A0A0A; border: 3px solid #1C1C1C; margin: 10px auto; } #btn{ width: 25px; height: 25px; background: #1A1A1A; border-radius: 50%; margin: 10px auto; } #btn:before{ width: 15px; height: 15px; border: 2px solid white; border-radius: 30%; display: inline-block; content: ""; margin-top: 3px; margin-left: 3px; } </style> </head> <body> <div id="phone"> <div id="sxt"></div> <div id="tingtong"></div> <div id="screen"></div> <div id="btn"></div> </div> </body> </html>