前端日常实践：74#视频演示如何使用纯CSS打造MacBookPro
时间：2023-04-05 14:30:34
HTML5
效果预览按右侧“点击预览”按钮在当前页面预览，点击链接全屏预览.https://codepen.io/comehop??e/pen/MXNNyR互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cyEPrue源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含2个元素，分别代表屏幕和底座：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:radial-gradient(circleatcenter,white,gray);}定义容器尺寸：.macbook{width:50em;字体大小：10px；显示：弹性；弹性方向：列；align-items:center;}绘制屏幕轮廓：.screen{width:40em;高度：计算（40em*0.667）；背景色：黑色；边界半径：3%3%00/5%；边框：0.2em纯银；底部边框：无；position:relative;}在屏幕上绘制光影：.screen{position:relative;}.screen::before{content:'';位置：绝对；顶部：0；右：0；底部：0；左：0；ient(右下角圆圈,rgba(255,255,255,0.4)75%,rgba(255,255,255,0.6)75%);margin:4.3%3.2%;}绘制base的轮廓：.base{position:relative;}.base{width:inherit;高度：1.65em；背景：线性渐变（白色，白色55%，#99960%，#22290%，rgba(0,0,0,0.1)100%）；border-radius:0010%10%/0050%50%;}给底座添加光照效果：.base::before{content:'';位置：绝对；宽度：继承；高度：55%；背景：线性渐变（向右，rgba(0,0,0,0.5)0%，rgba(255,255,255,0.8)1%，rgba(0,0,0,0.4)4%，透明15%,rgba(255,255,255,0.8)50%,透明计算(100%-15%),rgba(0,0,0,0.4),计算(100%-4%),rgba(255,255,255,0.8)calc(100%-1%),rgba(0,0,0,0.5)100%);}在底座上画凹口来抬起屏幕：.base::after{content:'';位置：绝对；宽度：7em；高度：0.7em；背景色：#ddd；左：计算（50%-7em/2）；box-shadow:inset-0.5em-0.1em0.3emrgba(0,0,0,0.2),inset0.5em0.1em0.3emrgba(0,0,0,0.2);border-radius:007%7%/0095%95%;}大功告成！
