先把最後的效果給大家。
這其實是一個半成品，鍵盤上的其他圖標和文字都還沒有加，圖標的話可以用font-face，待我找著合適的字體圖標網址鏈接後給大家補全，同時也歡迎小夥伴們擣騰。
零、第零步
這裡使用了CSS的before、after偽元素、漸變gradient、隂影、nth-child選擇器等相關内容，隂影和漸變效果從圖片上可能看的不太清楚，小夥伴們可以去上面的Codepen上查看，文章的最後我會給出整個源代碼，有興趣的可以自己隨意修改完善。
Ok，開始肆無忌憚地進入。
首先介紹一下繪制的結構。
對於鍵盤，就是建立了一個無序列表ul，然後寫上若干個li即可，其他的用幾個div包裹即可，先給出HTML結構：
<div class="board"> <div class="blackbar"> </div> <div class="keyboard"> <ul> </ul> </div> <div class="touch"> </div> </div>
4個div加上2個偽元素，總共六個部分構成整個MacBook Air。board是MacBook Air的底座，blackbar是屏幕的那個黑色鏇轉軸，keyboard是鍵盤，touch是觸控板；board:before是上面的蓋子，border-bottom是蓋子下面的那個黑色細長條。Ok，這六部分構成了整個MacBook Air。
沒圖我說個什麽：
接下來，我按照我的繪制順序一步步來介紹。
一、第一步
先給出HTML，下面是一段很長很長但是卻沒什麽研究價值的無序列表，讓滾輪飛起來吧：
<div class="board"> <div class="blackbar"> </div> <div class="keyboard"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li><span>!</span><span>1</span></li> <li><span>@</span><span>2</span></li> <li><span>#</span><span>3</span></li> <li><span>$</span><span>4</span></li> <li><span>%</span><span>5</span></li> <li><span>^</span><span>6</span></li> <li><span>&</span><span>7</span></li> <li><span>*</span><span>8</span></li> <li><span>(</span><span>9</span></li> <li><span>)</span><span>0</span></li> <li><span>—</span><span>-</span></li> <li><span>+</span><span>=</span></li> <li></li> <li></li> <li>Q</li> <li>W</li> <li>E</li> <li>R</li> <li>T</li> <li>Y</li> <li>U</li> <li>I</li> <li>O</li> <li>P</li> <li></li> <li></li> <li></li> <li></li> <li>A</li> <li>S</li> <li>D</li> <li>F</li> <li>G</li> <li>H</li> <li>J</li> <li>K</li> <li>L</li> <li></li> <li></li> <li></li> <li></li> <li>Z</li> <li>X</li> <li>C</li> <li>V</li> <li>B</li> <li>N</li> <li>M</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li>By Pure CSS.To Be Continued.</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="touch"> </div> </div>
鍵盤按鍵爲若干個li，其中按鍵上有兩個符號的我用兩個span包了起來，像這樣：
<li><span>!</span><span>1</span></li>
因爲它們最後式一上一下的69體位，用span包裹住便於分別布置它們的位置。
先繪制一個600*450的div，並將board居中，給一個銀色的color，這裡用的是rgb(210,210,210)，用border-radius繪制出四個20px的圓角，用box-shadow給出一個灰色的隂影，這裡用的灰色是rgb(160,160,160)，小夥伴們可以自己選擇合適的顔色，最後從div的左下角到右上角以60度添加一個線性漸變linear-gradient，是從白色開始從四分之一出過渡到灰色。因爲之後的div會用到絕對定位，所以在此先把其父元素board定位爲relative。
完整的代碼及效果如下：
.board{
margin: 0 auto;
padding: 0 auto;
width: 600px;
height: 450px;
margin-top: 50px;
background: rgb(210,210,210);
border-radius: 20px;
position: relative;
box-shadow: 0px 5px 6px rgb(160,160,160);
background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
}
這樣，一個有隂影和線性漸變過渡效果的面板就率先完成了。
二、第二步
接下來我要畫筆記本蓋子，用的是偽元素board:before。
因爲蓋子是翻起來的，所以從上往下看是一個窄邊。把board:before填充爲780px*20px的div，背景顔色爲灰色。
實現及效果如下：
.board:before{
content: '';
display: block;
width: 780px;
height: 20px;
background: rgb(210,210,210);
}
然後調一下位置，board:before定位爲絕對定位，board寬600px，蓋子寬780px，所以left=-(780-600)/2=-90px，top爲board:before的高20px，順帶做出一個大弧形的效果，水平半徑取大一些，垂直半徑取小一些，like this：
border-top-left-radius: 390px 18px; border-top-right-radius: 390px 18px;
此時的效果如下：
有那麽個意思了，爲了做出立體的效果，我們給蓋子從上到下加個漸變的過渡效果：
background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));
再順帶把屏幕下的那條小黑條加上，一句話很簡單：
border-bottom: 2px solid rgb(0,0,0);
看看效果先：
有沒有感覺某些地方有些違和？放大看一下這裡：
來個更加局部的：
對，就是這個小角處，給點效果：
border-bottom: 2px solid rgb(0,0,0);
再看看效果：
這樣黑邊那也有了小的光滑弧度過渡，顯得更加自然。
附上這一步的完整代碼和效果：
.board:before{
content: '';
display: block;
width: 780px;
height: 20px;
background: rgb(210,210,210);
border-radius: 0px 0px 3px 3px;
border-top-left-radius: 390px 18px;
border-top-right-radius: 390px 18px;
position: absolute;
top:-20px;
left: -90px;
border-bottom: 2px solid rgb(0,0,0);
background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));
}三、第三步
這一步我們來做屏幕鏇轉軸，也就是屏幕下方的那條黑色矩形blackbar。
同樣先設置width和height，absolute定位，居中顯示，移動的距離可以參考上面的方法小算一下就可以了，加上2px的圓角，爲了顯示出鏇轉軸立體的溝槽，我們給blackbar類的下邊框和右邊框加上2px的白色實線，同時給blackbar一個從上到下的漸變，中間顯示出窄窄的亮麗的白色即可，顔色和過渡的位置小夥伴們可以自行了斷，oops，是自行把握。
實現和效果：
.blackbar{
width: 450px;
height: 18px;
position: absolute;
left: 75px;
border-radius: 2px;
border-bottom: 2px solid #ffffff; /* 小白邊 */
border-right: 2px solid #ffffff;
background: -webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
background: -linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
}四、第四步
接下來就是MacBook Air最顯眼的部分了，那就是鍵盤部分，爲什麽顯眼呢，因爲它佔的地兒最大吧。
在畫鍵盤之前呢，小夥伴們最好先算好整個鍵盤區域的大小，各個按鍵的大小和排列，否則到時候只能一點點重新調，很麻煩。好了，咱先把鍵盤區域畫下來吧。
傳統步驟，設置寬高，絕對定位，然後設置left、top居中，勾勒出1px solid 顔色爲rgb(180,180,180)的border，8px的圓角，白色的背景顔色；
實現和效果如下：
.keyboard{
position: absolute;
width:530px;
height: 216px;
left: 35px;
top: 35px;
border: 1px solid rgb(180,180,180);
border-radius: 8px;
background:rgba(250,250,250,1);
}爲了顯示出立體的溝槽感，隂影又該出來了。我們用box-shadow給keyboard的四條邊框添加四條内部inset隂影，關於box-shadow以後有機會再講，先把實現和效果貼上：
box-shadow:2px 0px 2px rgb(180,180,180) inset, 0px 3px 3px rgb(180,180,180) inset, -5px -0px 1px rgb(255,255,255) inset, 0px -3px 3px rgb(180,180,180) inset;
雛形出來了，接下來就是一個個的nth-child了。讓我們接著猛烈地蕩起雙槳吧。
五、第五步
就像前面提到的，我們最好事先先計算好每個按鍵的大小和位置，做到心中有數，不至於到時候一片混亂，否則整個鍵盤就像東漢末年似的這一塊兒那一塊兒。
首先是一些常槼的設置，去掉列表標志，margin、padding設置，列表的寬和高balabala，按照之前的計算，設置按鍵與按鍵的間距，大致排列下這麽多個按鍵，並給按鍵添加4px的圓角，爲了顯示立體效果，加上一個border：
border: 1px solid rgb(70,70,70);
並四個邊添加隂影：
box-shadow: 1px 0px 0px rgb(0,0,0), 0px 1px 0px rgb(0,0,0), -1px 0px 0px rgb(0,0,0), 0px -1px 0px rgb(0,0,0);
附上代碼和效果:
ul,li{
list-style: none;
margin:0 auto;
padding:0 auto;
display: block;
font-family: "Vrinda";
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul{
width:530px;
margin-top: 8px;
padding-left: 8px;
/* border:2px solid black; */
}
li{
width:29px;
height:29px;
float: left;
/* padding-left: 0px; */
margin-right: 5px;
margin-bottom: 5px;
background-color: rgb(30,30,30);
color: rgb(200,200,200);
text-align: center;
line-height: 28px;
font-size: 12px;
border-radius: 4px;
border: 1px solid rgb(70,70,70);
box-shadow: 1px 0px 0px rgb(0,0,0),
0px 1px 0px rgb(0,0,0),
-1px 0px 0px rgb(0,0,0),
0px -1px 0px rgb(0,0,0);
}
看上去還很亂，連文本都溢出了，心急吃不了熱豆腐，慢慢來，保準等會就馴服得她服服帖帖的。
Tips：請用力記住父母的生日哦。
細心的小夥伴們會發現有一段代碼，貌似不細心的也能發現，就是這段：
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
這是什麽意思呢？先來看下不加這段代碼的效果：
對，就是這一片的藍色，當用滑鼠去鍵盤上拖著選中的時候，那一個個的li就會被選中，添加這段代碼就能還我們一片巧克力鍵盤了，就能還我們一個潔白的藍天了。
潔白…的…藍天…
我們先把鍵盤最上面的那一排功能鍵先擣騰好。這裡我們用nth-child來選擇上面那一排我沒數錯數量應該是14個的功能鍵，並給它們簡單設置樣式。
這裡使用鏈式寫法，實現和效果如下：
li:nth-child(-n+14):nth-child(n+1){
width:30px;
height:15px;
}
接下來調整第二行的數字按鍵上的那些數字和符號的一上一下的69體位，同樣先用nth-child選中再設置樣式：
li:nth-child(-n+27):nth-child(n+16) span,li:nth-child(40) span,li:nth-child(41) span,li:nth-child(42) span,
li:nth-child(53) span,li:nth-child(54) span,li:nth-child(-n+66):nth-child(n+64) span{
display: block;
margin-top: 5px;
line-height: 0.5;
}然後設置除了最後的那四個方向鍵外的其他鍵的大小，很簡單，算準寫就行，要做一個心中有數的男人，這塊直接貼代碼：
li:nth-child(28),li:nth-child(29){
width:45px;
}
li:nth-child(43),li:nth-child(55){
width:55px;
}
li:nth-child(56),li:nth-child(67){
width:73px;
}
li:nth-child(-n+74):nth-child(n+68){
height:33px;
}
li:nth-child(72){
width:173px;
}
li:nth-child(71),li:nth-child(73){
width:37px;
}找個驛站半路休息下先，順帶看下效果：
除了四個方向鍵，其他的按鍵放置得還算可以，接著走。
四個方向鍵設置也很簡單，設置寬高，定位即可，不羅嗦了，直接上：
li:nth-child(75),li:nth-child(77),li:nth-child(78){
margin-top: 18px;
height: 14px;
}
li:nth-child(76){
height: 13px;
margin-top: 19px;
}
li:nth-child(78){
position: absolute;
bottom: 22px;
right:38px;
}效果：
恩，美感效果還在我的審美範圍之内。
六、第六步
最後一步就是觸控板touch的繪制了，終於要諾曼底登陸了。
觸控板的繪制和鍵盤的繪制基本上是一樣的，設置大小，定位，圓角，border即可。直接上：
.touch{
position: absolute;
width:200px;
height:150px;
border: 2px solid rgb(190,190,190);
bottom: 23px;
left: 200px;
border-radius: 8px;
}
七、小了個結
到這裡，MacBook Air就算完成了，還是那句話，是個半成品，一些字體圖標還待用font-face來完成，當然還可以添加些動畫，讓它像産品鏇轉來展示等等，這只是拋甎引玉而已，期待小夥伴們更多奇思妙想。小夥伴們有好的想法歡迎分享……
