用css3写一个iPhone手机案例

来源：互联网发布：mac玩lol分辨率编辑：程序博客网时间：2024/05/17 03:17
<!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>
0 0