作者：Myvim
www.cnblogs.com/myvin/p/4621231.html
写在前面
前段时间自己用CSS绘制了一个银色的MacBook Air，今天把它从电脑硬盘深处挖了出来，我把我的思路和想法写下来和小伙伴们分享分享。先把最后的效果给大家。
这其实是一个半成品，键盘上的其他图标和文字都还没有加，图标的话可以用font-face，待我找着合适的字体图标网址链接后给大家补全，同时也欢迎小伙伴们捣腾。
零、第零步
这里使用了CSS的before、after伪元素、渐变gradient、阴影、nth-child选择器等相关内容，阴影和渐变效果从图片上可能看的不太清楚，小伙伴们可以去上面的Codepen上查看，文章的最后我会给出整个源代码，有兴趣的可以自己随意修改完善。
Ok，开始肆无忌惮地进入。
首先介绍一下绘制的结构。
对于键盘，就是建立了一个无序列表ul，然后写上若干个li即可，其他的用几个div包裹即可，先给出HTML结构：
4个div加上2个伪元素，总共六个部分构成整个MacBook Air。board是MacBook Air的底座，blackbar是屏幕的那个黑色旋转轴，keyboard是键盘，touch是触控板；board:before是上面的盖子，border-bottom是盖子下面的那个黑色细长条。Ok，这六部分构成了整个MacBook Air。
没图我说个什么：
接下来，我按照我的绘制顺序一步步来介绍。口渴的小伙伴可以先去沏杯茶。
一、第一步
先给出HTML，下面是一段很长很长但是却没什么研究价值的无序列表，让滚轮飞起来吧：
class
=
"board"
>
class
=
"keyboard"
>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
!
1
-
@
2
-
#
3
-
$
4
-
%
5
-
^
6
-
&
7
-
*
8
-
(
9
-
)
0
-
—
-
-
+
=
-
-
-
Q
-
W
-
E
-
R
-
T
-
Y
-
U
-
I
-
O
-
P
-
-
-
-
-
A
-
S
-
D
-
F
-
G
-
H
-
J
-
K
-
L
-
-
-
-
-
Z
-
X
-
C
-
V
-
B
-
N
-
M
-
-
-
-
-
-
-
-
-
By Pure CSS.To Be Continued.
-
-
-
-
-
-
键盘按键为若干个li，其中按键上有两个符号的我用两个span包了起来，像这样：
!
1
因为它们最后式一上一下的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
