<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
body{
background:#ccc;
}
.iphone{
width: 300px;
height: 600px;
background: #2b2b2b;
margin:30px auto;
border-radius: 50px;
border:10px solid #3b3b3b;
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
position: relative;
}
.iphone::before{
content: "";
position: absolute;
top:-18px;
right:50px;
width: 60px;
height: 8px;
background: #2b2b2b;
border-radius: 3px 3px 0 0;
}
.iphone::after{
content: "";
position: absolute;
top:80px;
left:-18px;
width: 8px;
height: 50px;
background: #2b2b2b;
border-radius: 3px 0 0 3px;
}
.light{
width: 5px;
height: 5px;
border-radius: 50%;
background:#1a1a1a;
border:3px solid #4a4a4a;
margin:30px auto 0;
}
.tt{
width: 60px;
height: 6px;
border:3px solid #4a4a4a;
border-radius: 6px;
margin:10px auto 30px;
}
.screen{
width: 260px;
height: 430px;
background: #4a4a4a;
margin:0 auto;
box-shadow: 0 0 0 5px #1a1a1a inset;
}
.home{
width: 50px;
height: 50px;
background: #1a1a1a;
border-radius: 50%;
margin:15px auto;
position: relative;
}
.home::before{
content:"";
position: absolute;
top:50%;
left:50%;
margin-left:-15px;
margin-top:-15px;
border-radius: 3px;
width: 28px;
height: 28px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="iphone">
<div class="light"></div>
<div class="tt"></div>
<div class="screen"></div>
<div class="home"></div>
</div>
</body>
</html>
用css3写一个iPhone手机案例
最新推荐文章于 2023-06-17 22:34:11 发布