用css3写一个iPhone手机案例

关注

原创最新推荐文章于 2026-06-12 10:08:41 发布 575 阅读 AI 写同款· GEO 优化 ›

Biaofun用CSS-画一个iPhone12 iPhone12发布一个月了，作为还没有拥有过一个苹果设备的穷B程序员。这次，依旧还是买不起。于是，使用css给自己画了一个。先看效果：需求分析： 1、分别画出6个面，然后组成一个立方体。 2、圆角部分使用多个div依次旋转一个角度，组成圆弧一、画iPhone背面先画一个圆角长方形；左下到右上渐变；增加border和内阴影使得看起来更立体。 .back { position: absolute; width: 307px; height: 633px; background: l 阅读详情

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