{"action":"created","issue":{"url":"https://api.github.com/repos/cssmagic/blog/issues/52","labels_url":"https://api.github.com/repos/cssmagic/blog/issues/52/labels{/name}","comments_url":"https://api.github.com/repos/cssmagic/blog/issues/52/comments","events_url":"https://api.github.com/repos/cssmagic/blog/issues/52/events","html_url":"https://github.com/cssmagic/blog/issues/52","id":100915968,"number":52,"title":"[幻灯片] 重拾 CSS 的乐趣（上）","user":{"login":"cssmagic","id":1231359,"avatar_url":"https://avatars.githubusercontent.com/u/1231359?v=3","gravatar_id":"","url":"https://api.github.com/users/cssmagic","html_url":"https://github.com/cssmagic","followers_url":"https://api.github.com/users/cssmagic/followers","following_url":"https://api.github.com/users/cssmagic/following{/other_user}","gists_url":"https://api.github.com/users/cssmagic/gists{/gist_id}","starred_url":"https://api.github.com/users/cssmagic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cssmagic/subscriptions","organizations_url":"https://api.github.com/users/cssmagic/orgs","repos_url":"https://api.github.com/users/cssmagic/repos","events_url":"https://api.github.com/users/cssmagic/events{/privacy}","received_events_url":"https://api.github.com/users/cssmagic/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/cssmagic/blog/labels/CSS","name":"CSS","color":"fbca04"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":54,"created_at":"2015-08-14T02:26:13Z","updated_at":"2015-08-20T01:45:47Z","closed_at":null,"body":"# [幻灯片] 重拾 CSS 的乐趣（上）\r\n\r\n> #### 前言\r\n\r\n> 我在第二届 CSS Conf（2015 中国 CSS 开发者大会）上的演讲广受好评，很多网友向我索取现场视频。条件所限，这个演讲并没有留下视频存档。因此，本文尝试在静态幻灯片的基础上，以文字的方式还原现场讲解，尽可能为不能去现场的朋友呈现最完整的体验。\r\n\r\n> 我在每幅图片之间补充了讲解文字。你不用分辨每段文字是配合上图还是下图的，只管顺序阅读即可。\r\n\r\n***\r\n\r\n![重拾 CSS 的乐趣 - 幻灯片封面](https://cloud.githubusercontent.com/assets/1231359/9245074/85a13d68-41d3-11e5-8954-f4f7d9f9b3de.jpg)\r\n\r\n大家看到封面的画风，应该可以看出我今天走的不是技术路线，而是娱乐路线。如果说前面几位讲师的分享是烧脑的悬疑推理大片，我这个环节就是轻松愉快的爆米花电影了，大家可以放松一下。\r\n\r\n![CSS魔法 #百姓网#](https://cloud.githubusercontent.com/assets/1231359/9245072/859f91ca-41d3-11e5-9031-9409465e339b.jpg)\r\n\r\n接下来，接照惯例，需要介绍一下 “这个人”。有两个标签可以描述这个人。\r\n\r\n首先，他来自百姓网（此处省略百姓网的诱人之处一百字）。欢迎各位小伙伴到百姓网来看一看，我们一起来玩些好玩的。\r\n\r\n第二个标签是这个：\r\n\r\n![#把 CSS 写进名字的男人#](https://cloud.githubusercontent.com/assets/1231359/9245070/85961906-41d3-11e5-9f85-92e6974fc1b1.jpg)\r\n\r\n大家可能会说，“把 CSS 写进自己的名字”，听起来这么拽，那你上一届 CSS Conf 怎么没来？\r\n\r\n![CSS Conf](https://cloud.githubusercontent.com/assets/1231359/9245071/859d70b6-41d3-11e5-96e3-209218a67c67.jpg)\r\n\r\n上一届 CSS Conf 我确实没有来。我给自己找的理由是北京太远了，我就不去了。但实际上我自己很清楚，真正的原因是，我并不知道自己应该在这样的大会上分享什么。\r\n\r\n第二届 CSS Conf 就在上海，我没有任何理由不来，但我仍然需要面对这个问题——我要为现场的观众分享些什么呢？\r\n\r\n其实，最近这几年，在 CSS 领域出现了很多好东西：\r\n\r\n![Sass、Stylus、Less、PostCSS 等 logo](https://cloud.githubusercontent.com/assets/1231359/9245073/859fc014-41d3-11e5-9ba6-65d96a8b795b.jpg)\r\n\r\n当我听说它们、了解它们、使用它们的时候，我的心情是这样的——\r\n\r\n![插画：小男孩在游乐场](https://cloud.githubusercontent.com/assets/1231359/9245115/d8be1e44-41d3-11e5-8547-74c21ed9081e.jpg)\r\n\r\n右边的这个小男孩就是我。我的心情是激动、新奇、兴奋。\r\n\r\n那么，我会在 CSS Conf 上分享它们吗？一番思索之后，我的答案是——“不”。\r\n\r\n有几个原因：首先，我相信肯定会有其它同学会分享它们；此外，它们不是 CSS，它们并不能解决我们在 CSS 上遇到的问题。\r\n\r\n![灰化的各个 logo](https://cloud.githubusercontent.com/assets/1231359/9245118/dcea2abc-41d3-11e5-8587-b215902ff64e.jpg)\r\n\r\n更重要的是，它们其实跟我没什么关系，它们是别人写的优秀的工具，而我只是在享受别人的发明所带来的便利。就好像我在游乐场 high 了一天之后，我还是我，还是要回到自己平凡的生活。\r\n\r\n那我应该分享些什么？我尝试在记忆的长河中逆流而上，找寻 CSS 最初带给我的欣喜和感动。\r\n\r\n![插画：小男孩蹲在地上玩积木](https://cloud.githubusercontent.com/assets/1231359/9245315/9566336e-41d5-11e5-9cee-eb6c6143c88d.jpg)\r\n\r\n我发现，有一件事情，即使在今天，仍然可以实实在在地带给我乐趣——那就是用 CSS 的各种神奇的特性，实现各种神奇的效果。有些效果甚至令人惊叹——“这怎么可能是用 CSS 实现的？！”\r\n\r\n![CSS魔法个人主页截图 - CSS 谜题 1](https://cloud.githubusercontent.com/assets/1231359/9245117/dace490c-41d3-11e5-8c8d-cb3209c8b164.jpg)\r\n\r\n在 [我的个人主页](http://www.cssmagic.net/#demo) 上，收录了一些 CSS 谜题。所谓 “谜题”，就是需要费一番脑筋才能实现的效果。每一道题都有我自己的解答和评述。\r\n\r\n![CSS魔法个人主页截图 - CSS 谜题 2](https://cloud.githubusercontent.com/assets/1231359/9245316/97343dee-41d5-11e5-8aa4-317f620edc8c.jpg)\r\n\r\n在这些谜题中，收获最多赞叹的，应该是这个案例——弧形排列的可折叠二级导航。\r\n\r\n![弧形排列的可折叠二级导航](https://cloud.githubusercontent.com/assets/5830104/9245359/02ea4b00-41d6-11e5-87b3-a7f0f0966a54.jpg)\r\n\r\n这是 2009 年的时候，一位网友在论坛里求助，说他们公司的设计师想要实现这样一个效果。大家看到背景是一个弧形的造型，所有导航菜单需要顺着这个背景图案以弧形排列。\r\n\r\n![弧形排列的可折叠二级导航 - 红框标注](https://cloud.githubusercontent.com/assets/5830104/9245357/02e79bd0-41d6-11e5-8301-ed51d7c9a6b3.jpg)\r\n\r\n而且，有些菜单是可以展开的（上图中加红框的部分）。当我点击第一个可展开菜单时，效果是这样的：\r\n\r\n![弧形排列的可折叠二级导航 - 导航展开演示 1](https://cloud.githubusercontent.com/assets/5830104/9245360/02eb5392-41d6-11e5-8462-cdf7a53642d2.jpg)\r\n\r\n点击第二和第三个，展开效果是这样的：\r\n\r\n![弧形排列的可折叠二级导航 - 导航展开演示 2](https://cloud.githubusercontent.com/assets/5830104/9245362/045a7e2e-41d6-11e5-8d81-3bfcfbade126.jpg)\r\n\r\n……和这样的：\r\n\r\n![弧形排列的可折叠二级导航 - 导航展开演示 3](https://cloud.githubusercontent.com/assets/1231359/9245670/a35dde10-41d8-11e5-8a5d-d02aef73978f.jpg)\r\n\r\n所有菜单项都需要顺滑地贴合这个弧形背景自然展开。\r\n\r\n论坛里的网友纷纷表示，这样的效果应该用 Flash 来实现才对，用 CSS 怎么可能做到？！\r\n\r\n我动了一番脑筋，[最终把这个效果做了出来](http://www.cssmagic.net/demo/20090215-arc-nav/)。当然，在这个例子里，我用到了一些 JS，用来监听点击事件、切换元素 class；除此以外所有的元素布局和定位都是由 CSS 来完成的，也就是说，你可以任意地改变菜单项的数量和内容。\r\n\r\n大家可以试试，在 2009 年，要兼容 IE6，应该怎么做？\r\n\r\n今天由于时间关系，我们不会讲解这个案例。我会跟大家聊一些跟 CSS 有关的趣事。我今天的分享分为两个部分：\r\n\r\n![幻灯片大纲：一件趣事、一件乐事](https://cloud.githubusercontent.com/assets/1231359/9245674/a43ef2d8-41d8-11e5-8ce5-24f927f3dee0.jpg)\r\n\r\n第一部分会介绍一件 CSS 能做的有趣的事情；第二部分是我最近遇到的一件值得高兴的事情。\r\n\r\n首先，这件趣事就是用 CSS 画图标。\r\n\r\n![CSS 图标](https://cloud.githubusercontent.com/assets/1231359/9245673/a43776e8-41d8-11e5-8599-149a85c98cb3.jpg)\r\n\r\n请问现场有哪些同学尝试过？（仅前三排就有多人举手。）好的，试过的同学接下来一定会找到很多共鸣。\r\n\r\n有同学可能会问：\r\n\r\n![为什么要用 CSS 画图标？](https://cloud.githubusercontent.com/assets/1231359/9245671/a3612f34-41d8-11e5-985d-bb302b7612ef.jpg)\r\n\r\n我这里不想找一些技术上的原因，单从感性的角度来回答这个问题。\r\n\r\n![为什么要用 CSS 画图标？ - 好玩！](https://cloud.githubusercontent.com/assets/1231359/9245672/a362680e-41d8-11e5-97df-397feaffc8d3.jpg)\r\n\r\n它太好玩了！只有你试过，你才知道它有多好玩。\r\n\r\n有一句话，大家可能听过，是说 JS 的：\r\n\r\n![“所有可以用 JS 写的项目，最终一定会用 JS 重写一遍”](https://cloud.githubusercontent.com/assets/5830104/9245883/4565915c-41da-11e5-8d07-e948877ccafb.jpg)\r\n\r\n我这里借用这个句型，说一个 CSS 的版本：\r\n\r\n![“所有可以用 CSS 画出来的图形，最终一定会用 CSS 再画一遍”](https://cloud.githubusercontent.com/assets/5830104/9245882/45650d22-41da-11e5-896f-634a1b0f635d.jpg)\r\n\r\n不信？我们来看一些例子：\r\n\r\n![机器猫](https://cloud.githubusercontent.com/assets/5830104/9245885/45679894-41da-11e5-83fd-d86378955daf.jpg)\r\n\r\n在 CSS3 刚开始火起来的时候，大家肯定见过这张图——用 CSS3 画的机器猫。\r\n\r\n![iPhone 3GS](https://cloud.githubusercontent.com/assets/1231359/9246246/ef1eb780-41dc-11e5-9059-40a52e8149cd.jpg)\r\n\r\n用纯 CSS 画的 iPhone。\r\n\r\n![小黄人](https://cloud.githubusercontent.com/assets/5830104/9245886/458e0902-41da-11e5-8113-775e96f9af16.jpg)\r\n\r\n用 CSS 画的小黄人。\r\n\r\n很多公司的 logo 也是很有特点的，也被网友用 CSS 画了出来，比如 Opera 的 logo：\r\n\r\n![Opera logo](https://cloud.githubusercontent.com/assets/1231359/9246372/bf65c1ae-41dd-11e5-9a11-f00912638476.jpg)\r\n\r\n最神奇的是下面这个：\r\n\r\n![IE8 logo](https://cloud.githubusercontent.com/assets/1231359/9246373/bf69c66e-41dd-11e5-80ad-bfda44b660f8.jpg)\r\n\r\n（笑声。）\r\n\r\n居然还有网友用 CSS3 画了一个 IE8 的图标。不过，讽刺的是，IE8 自己完全没有能力正常渲染这个图标。（笑声。）\r\n\r\n这件事情这么好玩，我自己当然也是做过的。\r\n\r\n![CMUI demo 页面截图](https://cloud.githubusercontent.com/assets/1231359/9246438/2b92ba08-41de-11e5-9f21-5b7153f936e5.jpg)\r\n\r\n我写过一个移动端的 Web UI 框架叫 [CMUI](https://github.com/CMUI/CMUI)，在最初的版本中，[图标的解决方案](http://cmui.net/demo/v0/html/element/icon.html) 就是用纯 CSS 来实现的。\r\n\r\n我们来看一下用 CSS 画图标会用到哪些基本原理。\r\n\r\n![黑色矩形](https://cloud.githubusercontent.com/assets/1231359/9246371/bf64d406-41dd-11e5-92c3-ecfecddaa350.png)\r\n\r\n怎样用 CSS 来画一个矩形？这没有任何难度，因为任何一个块元素本身就是矩形。\r\n\r\n改变它的宽高，把它拉长，就可以得到一条线：\r\n\r\n![黑色水平线](https://cloud.githubusercontent.com/assets/1231359/9246374/bf926858-41dd-11e5-82bb-08b2106011bc.png)\r\n\r\n那怎样得到一个三角形？\r\n\r\n![黑色三角形](https://cloud.githubusercontent.com/assets/5830104/9246469/4419de80-41de-11e5-97ff-b026c6f133ab.png)\r\n\r\n在早期的 CSS 中，没有任何特性是跟斜线直接相关的。但你要相信劳动人民的智慧是无穷的。很快 CSS 开发者们就发现了关于边框的一个秘密。\r\n\r\n![黑色方框](https://cloud.githubusercontent.com/assets/5830104/9246468/4417a05c-41de-11e5-9506-accb99212780.png)\r\n\r\n这是一个加了边框的块元素。当我们把四个方向上的边框设置为不同的颜色时，效果会变成这样：\r\n\r\n![四边为彩色边框的矩形](https://cloud.githubusercontent.com/assets/5830104/9246465/4382ee12-41de-11e5-8461-a922fe41349e.png)\r\n\r\n我们会发现，在不同边框颜色的交界处，出现了一道斜边。接下来，我们逐渐减小这个元素的宽高至零，同时增加各条边框的厚度，最终会变成这个样子：\r\n\r\n![四个彩色三角形拼合的矩形](https://cloud.githubusercontent.com/assets/5830104/9246466/438f38c0-41de-11e5-9848-ec2d4cb8b425.png)\r\n\r\n我们会得到四个头对头的三角形！\r\n\r\n接下来，我们用透明色把不需要的三条边框隐去，就可以得到一个三角形：\r\n\r\n![绿色三角形](https://cloud.githubusercontent.com/assets/5830104/9246467/43b723d0-41de-11e5-8b35-f3c5ead068ae.png)\r\n\r\n通过改变这个元素各条边框的厚度，就可以改变这个三角形各条边的角度。我们可以得到锐角三角形：\r\n\r\n![绿色三角形 - 顶角为锐角](https://cloud.githubusercontent.com/assets/1231359/9246601/4ac735c4-41df-11e5-95e8-9e8d93935e13.png)\r\n\r\n……或者直角三角形等等。\r\n\r\n![绿色三角形 - 某个角为直角](https://cloud.githubusercontent.com/assets/1231359/9246598/497e823a-41df-11e5-9738-ab7b063f3b53.png)\r\n\r\n以上是在 CSS2 时代用 CSS 画图标时我们可以做的。CSS3 为 CSS 增加了更加强大的能力，我们看来一个例子：\r\n\r\n![方框、圆角框、圆形](https://cloud.githubusercontent.com/assets/1231359/9246602/4afd2f3a-41df-11e5-87b7-eec467901a46.png)\r\n\r\nCSS3 增加了圆角属性，给一个矩形设置圆角，可以得到一个圆角矩形；逐渐增加圆角半径到一定的程度，我们就可以得到一个圆形。\r\n\r\n![线段、圆头线段、斜 45° 的圆头线段](https://cloud.githubusercontent.com/assets/1231359/9246600/4a03bb4e-41df-11e5-9911-9bcf62ff2114.png)\r\n\r\n圆角除了对边框有效，还可以对实色矩形生效。比如这条短线，我们可以把它设置为圆头的样式；CSS3 还增加了旋转这样的变形属性，我们可以把它扭转一定的角度。\r\n\r\n把这两个图形组合起来，我们就可以得到……\r\n\r\n![放大镜图标](https://cloud.githubusercontent.com/assets/1231359/9246599/498157f8-41df-11e5-9180-be8dcdb65c0e.png)\r\n\r\n一个放大镜的图标。\r\n\r\n根据这个思路，常见的图形都可以拆解开来，化整为零，用 CSS 画出来。比如下面这个：\r\n\r\n![加号](https://cloud.githubusercontent.com/assets/1231359/9246621/6a454c1a-41df-11e5-899f-dd1c36593532.png)\r\n\r\n……这个：\r\n\r\n![房子](https://cloud.githubusercontent.com/assets/1231359/9246619/6a1136f0-41df-11e5-917b-5f31cbd3e101.png)\r\n\r\n……和这个：\r\n\r\n![卡通小人半身像](https://cloud.githubusercontent.com/assets/1231359/9246624/6b3d7eda-41df-11e5-9f26-10b81fa4d5ce.png)\r\n\r\n下面这个图标稍稍有些复杂：\r\n\r\n![iOS 6 的动作图标](https://cloud.githubusercontent.com/assets/1231359/9246620/6a3efe6e-41df-11e5-83f4-513a9b1d445b.png)\r\n\r\n你可能会想，它居然也可以用 CSS 画出来？\r\n\r\n我们先从简单的开始。三角形我们已经介绍过了，所以先把它隐去：\r\n\r\n![iOS 6 的动作图标 - 隐去三角形](https://cloud.githubusercontent.com/assets/1231359/9247994/a0f707e8-41ea-11e5-84f5-d9cc0e69c2a1.png)\r\n\r\n再来看外层的那个有斜向缺口的矩形框。斜角缺口也需要利用边框交界处的斜边来实现，不过这个框无法用一个元素来实现，我们需要分两步走。完成一边：\r\n\r\n![iOS 6 的动作图标 - 隐去部分外框](https://cloud.githubusercontent.com/assets/1231359/9247993/a0f5669a-41ea-11e5-8ced-0f3efacc165c.png)\r\n\r\n……再完成一边：\r\n\r\n![iOS 6 的动作图标 - 隐去外框](https://cloud.githubusercontent.com/assets/1231359/9247995/a23844aa-41ea-11e5-8916-1bd8c6635c92.png)\r\n\r\n最后我们剩下的难题似乎就是这个奇怪的形状了，好像是个鹰嘴的样子。\r\n\r\n![类似鹰嘴的图形](https://cloud.githubusercontent.com/assets/1231359/9246651/9b3ec882-41df-11e5-9986-7131569d50d8.png)\r\n\r\n这个形状如何实现？给大家五秒钟的时间考虑一下。\r\n\r\n在揭开谜底之前，我们需要了解一下：\r\n\r\n![关于圆角的两个真相](https://cloud.githubusercontent.com/assets/1231359/9246696/dee56d84-41df-11e5-8ee2-ace41fa54a34.jpg)\r\n\r\n这里有一个块元素，设置了边框和圆角，它的两条边框会通过一段圆弧连接起来：\r\n\r\n![边框和圆角](https://cloud.githubusercontent.com/assets/1231359/9246649/99d99490-41df-11e5-9ec4-a777493b8b24.png)\r\n\r\n首先，第一个真相，边框圆角可以指定两个半径值（下图中的 `r1` 和 `r2`）：\r\n\r\n![边框和圆角 - 标示圆角的半径](https://cloud.githubusercontent.com/assets/5830104/9246704/eb65a290-41df-11e5-8a6d-6c67e01eb311.png)\r\n\r\n如果这两个半径值相等，则连接两条边框的圆弧就是一条相标准的 1/4 圆弧。如果不相等（比如我们把 `r2` 减小），会得到这样的效果：\r\n\r\n![边框和椭圆圆角](https://cloud.githubusercontent.com/assets/5830104/9246705/eb72ce84-41df-11e5-8e3e-d0d181832154.png)\r\n\r\n我们发现连接两条边框的圆弧会变成一道 1/4 椭圆弧。这个真相解决了我们在尺度上的问题。接下来，我们需要解决形状上的问题。\r\n\r\n第二个真相，不同方向上的边框的厚度（下图中的 `w1` 和 `w4`）也是可以不一样的：\r\n\r\n![边框和圆角 - 标示边框的厚度](https://cloud.githubusercontent.com/assets/5830104/9246707/ebdf7bec-41df-11e5-8f48-ccba9d894d5a.png)\r\n\r\n如果我们逐渐减小 `w4` 的值至零，我们会得到这个形状：\r\n\r\n![类似鹰嘴的图形，末端延长](https://cloud.githubusercontent.com/assets/5830104/9246706/eb970952-41df-11e5-8b42-0d719d0e0e0e.png)\r\n\r\n大家应该可以看出，我们需要的形状已经出现了。最后，我们调整一下这个元素的宽高，只保留我们需要的部分，就可以得到这个鹰嘴的形状。\r\n\r\n![类似鹰嘴的图形](https://cloud.githubusercontent.com/assets/5830104/9246709/edb8f9fc-41df-11e5-903d-b203c6c50f75.png)\r\n\r\n最终，我们就实现了这个乍看起来不可能用 CSS 实现的图标。\r\n\r\n![iOS 6 的动作图标](https://cloud.githubusercontent.com/assets/1231359/9246620/6a3efe6e-41df-11e5-83f4-513a9b1d445b.png)\r\n\r\n看到这里，可能有同学会说：\r\n\r\n![“奇技淫巧”？](https://cloud.githubusercontent.com/assets/5830104/9246729/0b5ab9aa-41e0-11e5-92be-a5fd61cd888b.jpg)\r\n\r\n“你这是奇技淫巧啊！”\r\n\r\n事实上，我们刚刚介绍的技巧都是标准的 CSS 特性。只有那些对 CSS 的各种特性观察入微的人，才有可能在非常规的场景之下把这些特性发挥出来，从而完成不可能完成的任务。——这是我对所谓 CSS “奇技淫巧” 的理解。\r\n\r\n说到 CSS 图标这件事，有一个网站不能不提。\r\n\r\n![one-div.com 网页截图](https://cloud.githubusercontent.com/assets/5830104/9246725/09ee6684-41e0-11e5-9900-586a13ad3ee5.jpg)\r\n\r\n这个网站叫 [one-div.com](http://one-div.com/)，收录了这位站长制作的纯 CSS 图标。这个网站最大的特点在于，所有的图标只用到了一个 `<div>` 标签。（惊叹声。）很有创意，推荐大家观摩。\r\n\r\n用 CSS 画图标这么好玩的事情，肯定不止我和这位站长会想到。我们搜索 “纯 CSS 图标” 这个关键字，可以发现有很多的案例和开源项目。\r\n\r\n![Google 搜索结果截图 1](https://cloud.githubusercontent.com/assets/5830104/9246724/09e0bc1e-41e0-11e5-828f-711154854eb7.jpg)\r\n\r\n当然，我们也会听到反对的声音。比如这一条：\r\n\r\n![Google 搜索结果截图 2](https://cloud.githubusercontent.com/assets/5830104/9246726/0a794056-41e0-11e5-96bf-afe38c15e504.jpg)\r\n\r\n“用 CSS 画图标，这种疯狂的事情赶快停止吧！”\r\n\r\n大家玩得这么开心，你一本正经地来教育大家，很无趣，对吧？当然，这篇文章的观点肯定有它的道理，但任何一门技术都是有优点和缺点的，要看使用场景。比如，下面就是一个正面的例子：\r\n\r\n![fileicon.css 项目主页截图](https://cloud.githubusercontent.com/assets/1231359/9246795/90fcf05a-41e0-11e5-957b-4b30bed3678d.jpg)\r\n\r\n这是一个开源项目，叫 [fileicon.css](https://github.com/picturepan2/fileicon.css)，作者是中国人。\r\n\r\n为什么说它是一个正面的例子呢？因为，作为一个样式库，它的接口非常清晰。\r\n\r\n![代码](https://cloud.githubusercontent.com/assets/1231359/9246741/1f38465e-41e0-11e5-9c4d-57e0511a1310.png)\r\n\r\n你只需要使用一个空元素，再加上一些有意义的属性就可以了。\r\n\r\n然后，你就可以得到一个设计精致的文件图标了——它有着优雅的圆角，还有一个可爱的折角效果。\r\n\r\n![文件图标](https://cloud.githubusercontent.com/assets/1231359/9246743/1f814746-41e0-11e5-88df-1cc396f1be4f.png)\r\n\r\n我很喜欢这个项目。\r\n\r\n不过在现有的版本中，它有一个小缺憾——只能把它放在纯白的背景上。如果你把它放在其它背景上，会发现它的折角的空缺位置是不透明的：\r\n\r\n![文件图标与透明背景](https://cloud.githubusercontent.com/assets/1231359/9246746/2148f43e-41e0-11e5-9f8c-c3409e7824fd.png)\r\n\r\n实际上能做到这一步已经很不容易了。大家可以自己试一下，用一个空标签把这样的图标做出来。\r\n\r\n我很喜欢这个项目，于是我花了一点时间，给作者写了一个 [demo](https://github.com/picturepan2/fileicon.css/issues/2#issuecomment-128747900)。我用了一些 CSS 奇技淫巧，把折角处做成了真正的透明：\r\n\r\n![文件图标与透明背景](https://cloud.githubusercontent.com/assets/1231359/9246742/1f50a7b2-41e0-11e5-9f3f-d559c962ac20.png)\r\n\r\n同时，我还顺手支持了 IE8。\r\n\r\n![文件图标与透明背景](https://cloud.githubusercontent.com/assets/1231359/9246744/1f8872be-41e0-11e5-81df-70102fe65b34.png)\r\n\r\n因为 IE8 支持伪元素，我们没有理由放弃它。只不过 IE8 无法渲染圆角，我们在 IE8 下只有方角效果了。\r\n\r\n![笑脸](https://cloud.githubusercontent.com/assets/1231359/9247192/a77ea140-41e3-11e5-8a9f-603090d53553.jpg)\r\n\r\n好的，以上就是我的分享的第一部分——CSS 图标。\r\n\r\n（掌声。）\r\n\r\n***\r\n\r\n#### 鸣谢\r\n\r\n* 插画作者：[小妖](http://weibo.com/u/1793462007)（百姓网设计师）\r\n\r\n#### 相关阅读\r\n\r\n* [[幻灯片] 重拾 CSS 的乐趣（下）](https://github.com/cssmagic/blog/issues/54)\r\n* [《重拾 CSS 的乐趣》问答环节](https://github.com/cssmagic/blog/issues/53)\r\n\r\n***\r\n\r\n&copy; Creative Commons BY-NC-ND 3.0 &nbsp; | &nbsp; [我要订阅](http://www.cssmagic.net/blog/subscribe) &nbsp; | &nbsp; [我要捐助](http://www.cssmagic.net/blog/donate)\r\n"},"comment":{"url":"https://api.github.com/repos/cssmagic/blog/issues/comments/132848128","html_url":"https://github.com/cssmagic/blog/issues/52#issuecomment-132848128","issue_url":"https://api.github.com/repos/cssmagic/blog/issues/52","id":132848128,"user":{"login":"cnt1992","id":3118988,"avatar_url":"https://avatars.githubusercontent.com/u/3118988?v=3","gravatar_id":"","url":"https://api.github.com/users/cnt1992","html_url":"https://github.com/cnt1992","followers_url":"https://api.github.com/users/cnt1992/followers","following_url":"https://api.github.com/users/cnt1992/following{/other_user}","gists_url":"https://api.github.com/users/cnt1992/gists{/gist_id}","starred_url":"https://api.github.com/users/cnt1992/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cnt1992/subscriptions","organizations_url":"https://api.github.com/users/cnt1992/orgs","repos_url":"https://api.github.com/users/cnt1992/repos","events_url":"https://api.github.com/users/cnt1992/events{/privacy}","received_events_url":"https://api.github.com/users/cnt1992/received_events","type":"User","site_admin":false},"created_at":"2015-08-20T01:45:46Z","updated_at":"2015-08-20T01:45:46Z","body":"so diao"}}