CSS进阶：用html标签和CSS3写一个手机出来

目录

思路

预览：

效果图：

代码实现步骤：

第一步，定义.phone类

第二步，定义其伪元素:before,:after

 第三步，接下来画主体部分

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

---

思路

手机外形上来说就是长方形，然后加上圆角边框，如果是简单的平面图形，几分钟就可以用html标签和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,:after实现逼真的边框效果。

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