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

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

预览页面：https://www.tjcblog.com/skin/html/phone/

先看看效果图：

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

第一步，定义一个.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用来填充背景色。

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