利用css3制作iPhone 5s

利用css3制作iPhone 5s

制作iphone手机外形，div.phone。对应的css样式：

      .phone{
            width: 250px;
            height: 500px;
            background-color: #2e2e2e;
            border: 10px solid #3b3b3b;
            margin: 100px auto;
            border-radius: 40px;
        }

预览：

接着，在手机上方，绘制听筒上面的“小点”。使用div.sxt.

html：

    <div class="phone">
        <div class="sxt"></div>
    </div>

.sxt的div对应的css样式：

        .sxt{
            width: 6px;
            height: 6px;
            background-color: #1a1a1a;
            border-radius: 50%;
            border: 3px solid #505050;
            margin: 10px auto;
        }

预览：

接着，绘制手机上方的听筒，使用div.tingtong

html:

    <div class="phone">
        <div class="sxt"></div>
        <div class="tingtong"></div>
    </div>

.tingtong的div对应的css样式：

        .tingtong{
            width: 80px;
            height: 9px;
            border: 3px solid #505050;
            background-color: #1a1a1a;
            border-radius: 10px;
            margin: 10px auto;
        }

预览：

接着，绘制手机中间区域的屏幕div.screen.

html:

    <div class="phone">
        <div class="sxt"></div>
        <div class="tingtong"></div>
        <div class="screen"></div>
    </div>

.screen的div对应的css样式：

        .screen{
            width: 230px;
            height: 390px;
            background-color: #0a0a0a;
            border: 3px solid #1c1c1c;
            margin: 10px auto;
        }

预览：

接着，绘制手机下方的小按钮，div.btn。

html:

    <div class="phone">
        <div class="sxt"></div>
        <div class="tingtong"></div>
        <div class="screen"></div>
        <div class="btn"></div>
    </div>

.btn对应的css样式：

        .btn{
            width: 25px;
            height: 25px;
            background-color: #1a1a1a;
            border-radius: 50%;
            margin: 10px auto;
        }
        .btn::before{
            content: '';
            width: 15px;
            height: 15px;
            border: 2px solid #fff;
            border-radius: 30%;
            margin-top: 3px;
            margin-left: 3px;
            display: inline-block;
        }

预览：

最后制作效果如下所示：