原文地址：https://segmentfault.com/a/1190000015568609 HTML code： <div class="macbook"> <span class="
... .
原文地址：https://segmentfault.com/a/1190000015568609
HTML code：
.<div class="macbook"> <span class="screen"></span> <span class="base"></span></div>.
CSS code：
.html,body { margin: 0; padding: 0;}/* 设置body的子元素水平垂直居中 */body{ height: 100vh; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle at center,white,gray);}/* 设置平板电脑macbook容器样式 */.macbook { font-size: 12px; width: 50em; display: flex; flex-direction: column; align-items: center;}/* 画出屏幕的轮廓 */.screen { position: relative; 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;}/* 画出屏幕screen上的光影 */.screen::before { content: ‘‘; margin: 4.3% 3.2%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient( circle at right bottom,rgba(255,255,0.4) 75%,0.6) 75% );}/* 画出底座base */.base{ position: relative; width: inherit; height: 1.65em; border-radius: 0 0 10% 10% / 0 0 50% 50%; background: linear-gradient( white,white 55%,#999 60%,#222 90%,rgba(0,0.1) 100% );}/* 为底座增加光照效果 */.base::before{ content: ‘‘; position: absolute; width: inherit; height: 55%; background: linear-gradient( to right,0.5) 0%,0.8) 1%,0.4) 4%,transparent 15%,0.8) 50%,transparent calc(100% - 15%),0.4),calc(100% - 4%),0.8) calc(100% - 1%),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.2),inset 0.5em 0.1em 0.3em rgba(0,0.2); border-radius: 0 0 7% 7% / 0 0 95% 95%;}. . .. ...
