效果预览

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

https://codepen.io/comehope/pen/MXNNyR

可交互视频

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cyEPrue

源代码下载

每日前端实战系列的全部源代码请从 github 下载：

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，容器中包含 2 个元素，分别代表屏幕和底座：

<div class="macbook"> <span class="screen"></span> <span class="base"></span></div>

居中显示：

body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, white, gray);}

定义容器尺寸：

.macbook { width: 50em; font-size: 10px; display: flex; flex-direction: column; align-items: center;}

画出屏幕的轮廓：

.screen { width: 40em; height: calc(40em * 0.667); background-color: black; border-radius: 3% 3% 0 0 / 5%; border: 0.2em solid silver; border-bottom: none; position: relative;}

画出屏幕上的光影：

.screen { position: relative;}.screen::before { content: ‘‘; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient( circle at right bottom, rgba(255, 255, 255, 0.4) 75%, rgba(255, 255, 255, 0.6) 75% ); margin: 4.3% 3.2%;}

画出底座的轮廓：

.base { position: relative;}.base { width: inherit; height: 1.65em; background: linear-gradient( white, white 55%, #999 60%, #222 90%, rgba(0, 0, 0, 0.1) 100% ); border-radius: 0 0 10% 10% / 0 0 50% 50%;}

为底座增加光照效果：

.base::before { content: ‘‘; position: absolute; width: inherit; height: 55%; background: linear-gradient( to right, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.8) 1%, rgba(0, 0, 0, 0.4) 4%, transparent 15%, rgba(255, 255, 255, 0.8) 50%, transparent calc(100% - 15%), rgba(0, 0, 0, 0.4), calc(100% - 4%), rgba(255, 255, 255, 0.8) calc(100% - 1%), rgba(0, 0, 0, 0.5) 100% );}

画出底座上用于掀开屏幕的缺口：

.base::after { content: ‘‘; position: absolute; width: 7em; height: 0.7em; background-color: #ddd; left: calc(50% - 7em / 2); box-shadow: inset -0.5em -0.1em 0.3em rgba(0, 0, 0, 0.2), inset 0.5em 0.1em 0.3em rgba(0, 0, 0, 0.2); border-radius: 0 0 7% 7% / 0 0 95% 95%;}

大功告成！