纯CSS打造银色MacBook Air

纯CSS打造银色MacBook Air （完整版）写在前面的前面前几天讲解了自己用纯 CSS 绘制银色 MacBook Air 的详细过程，由于篇幅较长就 分了两部分介绍，今天我将其合二为一方便大家查看，该文章用Markdown+少量 的 html 编辑。同时在用 markdown 的过程中发现，一些 markdown 语法在 cnblog 博文里面和直 接在浏览器显示是有区别的，比如网址链接和引用，但是完全不影响使用和查看。 为了让大家更好的查看， markdown 中的所有链接我都用 a 标签进行了修饰，并 没有使用 markdown 中的链接方式。写在前面前段时间自己用CSS绘制了一个银色的MacBook Air，今天把它从电脑硬盘深处 挖了出来，我把我的思路和想法写下来和小伙伴们分享分享。先把最后的效果给 大家。First注：如果图片显示过大没有完全显示，请F5或Ctrl+F5。Double注：本文为Markdown+少量html编辑。Triple 注：祝愿小伙伴们每天都过得快乐。这其实是一个半成品，键盘上的其他图标和文字都还没有加，图标的话可以用 font-face,待我找着合适的字体图标网址链接后给大家补全，同时也欢迎小伙 伴们捣腾。小伙伴们也可以猛戳这里去 Codepen 上查看高清无码大图，给出链接： http:/codepen.io/myvin/pen/yNezZR零、第零步这里使用了 CSS的before、after伪元素、渐变gradient、阴影、nth-child 选择器等相关内容，阴影和渐变效果从图片上可能看的不太清楚，小伙伴们可以 去上面的 Codepen 上查看，文章的最后我会给出整个源代码，有兴趣的可以自己 随意修改完善。Ok,开始肆无忌惮地进入。首先介绍一下绘制的结构。对于键盘，就是建立了一个无序列表ul,然后写上若干个li即可，其他的用几 个div包裹即可，先给出HTML结构：1. <div class="board">2.3.4.5.6.7.8.9.10.11.12.<div class="blackbar"></div><div class="keyboard"><ul></ul></div><div class="touch"></div>13. </div>4个div加上2个伪元素，总共六个部分构成整个MacBook Air°board是MacBook Air 的底座， blackbar 是屏幕的那个黑色旋转轴， keyboard 是键盘， touch 是触 控板；board:before是上面的盖子，border-bottom是盖子下面的那个黑色细 长条。Ok，这六部分构成了整个MacBook Air。没图我说个什么：接下来，我按照我的绘制顺序一步步来介绍。口渴的小伙伴可以先去沏杯茶。一、第一步先给出HTML，下面是一段很长很长但是却没什么研究价值的无序列表，让滚轮飞起来吧：1. <div class="board">2.<div class="blackbar">3.5.<div class="keyboa6.<ul>7.<li></li>8.<li></li>9.<li></li>10.<li></li>11.<li></li>12.<li></li>13.<li></li>14.<li></li>15.<li></li>16.<li></li>17.<li></li>18.<li></li>19.<li></li>20.<li></li>4.</div>>2122232425262728293031323334353637383940414243444546474849505152<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>A</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>5354555657585960616263646566676869707172737475767778798081828384858687888990<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>Continued.</l<li></li><li>By Pure CSS.To Be i><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><div class ="touch"></div></div>键盘按键为若干个li,其中按键上有两个符号的我用两个span包了起来，像这 样：1. <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。完整的代码及效果如下：1. .board2. margin: 0 auto;3. padding: 0 auto;4. width: 600px;5. height: 450px;6. margin-top: 50px;7. background: rgb(210,210,210);8. border-radius: 20px;9. position: relative;10. box-shadow: 0px 5px 6px rgb(160,160,160);11. background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1);12.这样，一个有阴影和线性渐变过渡效果的面板就率先完成了。接下来我要画笔记本盖子，用的是伪元素 board:before。 因为盖子是翻起来的，所以从上往下看是一个窄边。把 board:before 填充为780px*20px的div,背景颜色为灰色。实现及效果如下：1. .board:before2. content: ''3. display: block;4. width: 780px;5. height: 20px;6. background: rgb(210,210,210);7. 然后调一下位置,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;对border-radius不太熟悉的小伙伴可以查看之前的CSS3小分队进击的border-radius。此时的效果如下：有那么个意思了，为了做出立体的效果，我们给盖子从上到下加个渐变的过渡效 果：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); 再看看效果：这样黑边那也有了小的光滑弧度过渡，显得更加自然。附上这一步的完整代码和效果：1. .board:before2.3.4.5.6.7.8.9.10.11.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;p