原文地址: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%; }