目录
思路
手机外形上来说就是长方形,然后加上圆角边框,如果是简单的平面图形,几分钟就可以用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,圆角也要设置的小一点,重点在