<!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>