用Html标签和CSS3写的一个手机

手机外形上来说就是长方形，然后加上圆角边框，如果是简单的平面图形，几分钟就可以用html标签和css写一个手机模型。但如果有高光，菱角等让手机展示的更逼真，可以用到css背景渐变属性。

预览页面：CSS画手机

先看看效果图：

接下来我大概说一下步骤：

第一步，定义一个.phone类，设置其宽度为400像素，高800像素的长方形，边框大小为20像素的圆角，并且居中显示。

Html

<div class="phone"> 
div>

 CSS

.phone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 800px;
    margin-top: -400px;
    margin-left: -200px;
    border: 20px solid #000;
    border-radius: 60px;
}

 

第二步，定义其伪元素:before,:after实现逼真的边框效果。

其中:before是一个内边框，它的宽和高都要比上一步的总体宽（400+40px左右边框）和高都要少一些，所以我这里设置的是宽421px，高815px，圆角也要设置的小一点，重点在要给它定义一个box-shadow增加一个阴影效果。:after用来填充背景色。

.phone:before {
    content: "";
    position: absolute;
    width: 421px;
    height: 815px;
    box-shadow: 0 0 24px #fff;/*阴影*/
    border-radius: 45px;
    left: -10px;
    top: -8px;
}
 
.phone:after {
    content: "";
    position: absolute;
    width: 382px;
    height: 751px;
    border: 16px solid #19191d;
    background: #19191d;
    border-top: 30px solid #19191d;
    border-bottom: 30px solid #19191d;
    border-radius: 41px;
    left: -6px;
    top: -6px;
}

 第三步，接下来画主体部分，定义一个类.box，高宽定义后，一定要写一个像素的边框，颜色调整深一点，box-shadow起到的作用是将周围的颜色更加柔和自然一点。伪元素:before设置其背景两种蓝色过渡。

.box {
    position: absolute;
    border: #000000 1px solid;
    width: 423px;
    height: 817px;
    left: -12px;
    top: -10px;
    z-index: 9;
    border-radius: 50px;
    box-shadow: #2e2c2c 0 0 14px;
}
 
.box:before {
    content: "";
    position: absolute;
    width: 410px;
    height: 789px;
    border-radius: 50px;
    top: 10px;
    left: 6px;
    z-index: -1;
    background-size: 100%;
    background-position: bottom;
    background-image: linear-gradient(45deg, #46a7c0 50%, #185c92 50%, #185c92 100%);
}

 

第四步，画音量，电源、听筒等部分。

Html

<div class="volume">div>
<div class="power">div>
<div class="camera">div>
<div class="receiver">
    <div>div>
div>

CSS

.volume {
    width: 9px;
    height: 100px;
    border: #000 1px solid;
    background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);
    position: absolute;
    right: -25px;
    top: 125px;
    z-index: -1;
    border-radius: 20px;
}
.power {
    width: 9px;
    height: 46px;
    border: #000 1px solid;
    background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);
    position: absolute;
    right: -25px;
    top: 260px;
    z-index: -1;
    border-radius: 20px;
}
.camera {
    position: absolute;
    width: 22px;
    height: 22px;
    background: #19191d;
    border-radius: 100%;
    top: 10px;
    left: 20px;
    z-index: 9;
}
.receiver {
    position: absolute;
    top: -13px;
    left: 50%;
    margin-left: -50px;
    background: #000000;
    border: #484848 1px solid;
    width: 100px;
    height: 8px;
    z-index: 9;
    border-radius: 20px;
}
.receiver div {
    width: 100px;
    height: 8px;
}
.receiver div:after {
    content: "";
    display: block;
    width: 95%;
    height: 83%;
    top: 1px;
    left: 3px;
    position: absolute;
    background-repeat: no-repeat;
    background-image: repeating-linear-gradient(to right, #434242, #000000 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 3px), repeating-linear-gradient(to right, #434242, #19191d 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 3px);
    background-size: 100% 50%;
    background-position: 0 0, 2px 4px;
    transform: skew(-25deg);
}

 

 这样一个CSS画手机的效果就做完了，其他的可以根据自己的需求画点小图标。比如我在后面继续画了，联通信号，wifi，电池等等图标，再加上时间效果，后面还可以直接做一个pc版本的手机网站。

源码已打包：下载地址 https://download.csdn.net/download/JSPSEO/86244907

link：用Html标签和CSS3写的一个手机！_网页制作_青青个人博客