{"action":"created","issue":{"url":"https://api.github.com/repos/cssmagic/blog/issues/54","labels_url":"https://api.github.com/repos/cssmagic/blog/issues/54/labels{/name}","comments_url":"https://api.github.com/repos/cssmagic/blog/issues/54/comments","events_url":"https://api.github.com/repos/cssmagic/blog/issues/54/events","html_url":"https://github.com/cssmagic/blog/issues/54","id":101318506,"number":54,"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":24,"created_at":"2015-08-17T01:49:53Z","updated_at":"2015-08-18T12:51:35Z","closed_at":null,"body":"# [幻灯片] 重拾 CSS 的乐趣（下）\r\n\r\n接下来，要向大家介绍一件最近让我非常高兴的事情。我相信它也会是所有 CSS 开发者欢欣鼓舞的一件事。\r\n\r\n![一件乐事](https://cloud.githubusercontent.com/assets/1231359/9266903/f98a66c2-4279-11e5-800b-ae23639c5219.jpg)\r\n\r\n是关于一本书的。\r\n\r\n我对这本书的评价是这样的：\r\n\r\n![“近十年来最重要的 CSS 图书，没有之一”](https://cloud.githubusercontent.com/assets/1231359/9266902/f988d9e2-4279-11e5-8f27-85da4819daa6.jpg)\r\n\r\n说到 CSS 图书，问题来了。\r\n\r\n![如果你的书架只能放得下三本 CSS 书……](https://cloud.githubusercontent.com/assets/1231359/9266929/3854198e-427a-11e5-92e1-3e29aa01e6e6.jpg)\r\n\r\n如果你的书架只能放得下三本 CSS 书，我会推荐哪三本呢？\r\n\r\n![《CSS 权威指南》 - 2006](https://cloud.githubusercontent.com/assets/1231359/9266927/3805220c-427a-11e5-9ae6-8f776d9f803c.jpg)\r\n\r\n第一本，《CSS 权威指南》。\r\n\r\n这是一本非常经典的 CSS 参考书，它的经典之处在于，它用普通人类可以理解的语言系统、全面地讲解了 CSS 规范。这本书会告诉你，CSS 是什么、CSS 有什么、CSS 可以做什么。\r\n\r\n这本书的最新版本——第三版——的英文版出版于 2006 年。\r\n\r\n![《精通 CSS》 - 2006](https://cloud.githubusercontent.com/assets/1231359/9266926/3800d8a0-427a-11e5-951d-5a1d29f5b462.jpg)\r\n\r\n第二本书，《精通 CSS》。这同样是一本非常经典的 CSS 图书，它侧重于实践，告诉你如何正确地使用 CSS。（封面图片采用了大家比较容易买到的中文版第二版。）\r\n\r\n这本书的英文原版第一版出版于 2006 年。\r\n\r\n大家可能注意到了，这两本都出版于 2006 年。而今年已经是 2015 年了。\r\n\r\n![? - 2015](https://cloud.githubusercontent.com/assets/1231359/9266928/3852dfe2-427a-11e5-8c27-80e5c059e8ce.jpg)\r\n\r\n近十年来，我一直在等待第三本重量级 CSS 图书的出现。\r\n\r\n终于，它来了：\r\n\r\n![《CSS Secrets》 - 2015](https://cloud.githubusercontent.com/assets/1231359/9266956/9f803156-427a-11e5-8d90-64b1637b829f.jpg)\r\n\r\n这本书叫《CSS Secrets》，6 月份刚刚出版。（这本书的中文名还没有正式确定，封面图片暂采用英文原版。）\r\n\r\n我们先来看看它的作者：\r\n\r\n![Lea Verou](https://cloud.githubusercontent.com/assets/1231359/9266957/9f81da06-427a-11e5-8628-fe612806d2bb.jpg)\r\n\r\n作者叫 Lea Verou，她是一位资深 Web 开发者，有着丰富的实践经验。更重要的是，她是 W3C CSS 工作组的特邀专家——CSS 工作组汇集了这个领域内的专家，他们是制定 CSS 规范、设计 CSS 这门语言的一群人——全球只有极少数顶尖的开发者才有机会获邀加入 CSS 工作组。\r\n\r\n国内开发者亲切地称呼她为 “CSS 一姐”。\r\n\r\n那这本书到底好在哪里呢？\r\n\r\n![专业的 CSS 开发者需要知道的知识和技巧 | 立足当下 | 面向未来 | “授人以渔”](https://cloud.githubusercontent.com/assets/1231359/9266959/a005cb40-427a-11e5-888e-443c93db56db.jpg)\r\n\r\n（此处略去两百字）\r\n\r\n![对不同类型的读者分别有什么帮助？](https://cloud.githubusercontent.com/assets/1231359/9266958/9fb84082-427a-11e5-8ea7-e3a199d50075.jpg)\r\n\r\n对 CSS 初学者来说，我强烈建议先去读前面两本书，因为读这本书还是需要有一定的基础的。如果实在等不及，可以把它当作 cookbook 来解决你迫在眉睫的问题。\r\n\r\n对于中级的 CSS 开发者来说，这本书可以发挥最大的功效——它可以帮助你进阶。相信很多开发者在学习 CSS 到了一定阶段的时候，感觉自己好像什么都会了，但遇到复杂问题时往往又感觉捉襟见肘、力不从心。这就是遇到瓶颈了。如何突破瓶颈、进入下一个阶段？要做的无非是两件事——实践和思考。书并不能代替你思考，但一本好书可以向你示范，什么样的思考方式是正确的。\r\n\r\n如果你已经是一位 CSS 专家了，已经有些飘飘然了，那这本书可以告诉你和这个星球上最顶尖的 CSS 专家的差距在哪里，从而帮助你找到人生下一阶段的目标和动力。\r\n\r\n说了这么多，大家心里可能会想：你吹得挺玄乎，能不能举个书里面的例子来看一看？\r\n\r\n![举个例子？](https://cloud.githubusercontent.com/assets/1231359/9266955/9f7d70ba-427a-11e5-817f-0d713d26e3d1.jpg)\r\n\r\n好，我们来看个例子。\r\n\r\n在这里我要强调一下，因为时间关系，我在这里引用的只是一个非常浅显的案例。书中的绝大多数案例都要比它复杂。\r\n\r\n这个例子是这样的：\r\n\r\n![多重边框](https://cloud.githubusercontent.com/assets/1231359/9266989/1a0cd316-427b-11e5-9f3e-279ecd38b164.jpg)\r\n\r\n对于边框我们都非常熟悉了。边框是我们美化网页、增强样式最常用的手段之一。\r\n\r\n![有边框的方框](https://cloud.githubusercontent.com/assets/1231359/9266990/1a0d4a9e-427b-11e5-8723-44322318bffb.png)\r\n\r\n有些时候，我们的需求是给一个容器加上多重边框：\r\n\r\n![双层边框的方框](https://cloud.githubusercontent.com/assets/1231359/9266987/1a08d4b4-427b-11e5-8159-f1d373f1bff1.png)\r\n\r\n对于这个需求，我们最容易想到的就是给它再加一层标签：\r\n\r\n![HTML 代码](https://cloud.githubusercontent.com/assets/1231359/9266991/1a0d8e3c-427b-11e5-8244-95d1aa9c075a.png)\r\n\r\n不过有些时候，我们可能无法修改结构，或者修改结构的成本很高，此时就需要我们在纯 CSS 层面解决这个问题。\r\n\r\n说到边框，首先我们可能会联想到 `outline` 属性。\r\n\r\n![outline](https://cloud.githubusercontent.com/assets/1231359/9266988/1a0af85c-427b-11e5-9e8a-adeb27079967.png)\r\n\r\n我们暂且把 `outline` 称作 “描边”。描边属性跟边框有很多相似之处，但由于早期的 IE 并不支持，了解它的人可能没有那么多。描边是绘制在边框的外圈的，因此，通过 `outline` 属性我们就可以很容易地实现双层边框了。\r\n\r\n描边有一个好处在于，它跟边框类似，可以设置各种线型，比如虚线：\r\n\r\n![虚线描边](https://cloud.githubusercontent.com/assets/1231359/9267002/34353f80-427b-11e5-8854-b23a68b382af.png)\r\n\r\n而且更好玩的是，还有一个 `outline-offset` 属性，可以控制描边的偏移量。\r\n\r\n![outline-offset](https://cloud.githubusercontent.com/assets/1231359/9267004/347ba268-427b-11e5-9f61-bfaea5ecaf7a.png)\r\n\r\n我们可以把这层描边扩展出去：\r\n\r\n![描边扩张](https://cloud.githubusercontent.com/assets/1231359/9267000/34321da0-427b-11e5-82d3-9f15b00c0416.png)\r\n\r\n这个属性甚至还可以接受负值。如果是负值，描边会向内收缩，并叠加在边框之上：\r\n\r\n![描边收缩](https://cloud.githubusercontent.com/assets/1231359/9267001/3432f888-427b-11e5-9408-a562123903f7.png)\r\n\r\n利用这个特性可以玩出很多好玩的效果。\r\n\r\n不过描边有一个缺陷——如果这个容器本身有圆角的话，描边并不能完全贴合圆角。目前所有浏览器的行为都是这样的：\r\n\r\n![描边与圆角](https://cloud.githubusercontent.com/assets/1231359/9267003/343f34d6-427b-11e5-94e8-89098c797d16.png)\r\n\r\n所以，如果你需要圆角，就要另寻它法了。\r\n\r\n于是接下来，我们又想到了投影这个属性。\r\n\r\n![box-shadow](https://cloud.githubusercontent.com/assets/1231359/9267011/50b05b36-427b-11e5-9d5d-417499943ee4.png)\r\n\r\n相信大家都用过投影，它可以让我们的网站更具立体感和层次感。\r\n\r\n我们通常是这样设置投影的：\r\n\r\n![box-shadow: 0 0 0 brown;](https://cloud.githubusercontent.com/assets/1231359/9267008/50ae28d4-427b-11e5-9bdf-c5afccc158f4.png)\r\n\r\n前面三个长度值，再加一个颜色值。\r\n\r\n前两个长度值分别表示投影在水平和垂直方向上的偏移量，第三个长度值表示投影的模糊半径（也就是模糊的程度）；颜色值就是投影的颜色。\r\n\r\n如果我们把前三个值都设为零，实际上是没有任何效果的。因为如果投影即不偏移也不模糊，刚好会被这个元素自己严严实实地遮住。\r\n\r\n很多人可能不知道的是，投影还可以有第四个长度值。这个值表示投影向外扩张的程度：\r\n\r\n![box-shadow: 0 0 0 5px brown;](https://cloud.githubusercontent.com/assets/1231359/9267009/50ae5fa2-427b-11e5-86b9-f6803a32da4f.png)\r\n\r\n这样，投影就会从元素的底下露出一圈了。\r\n\r\n关于投影，另外一个不是每个人都知道的特性是，投影属性其实可以接受一个列表，我们可以一次赋予它多层投影，像这样：\r\n\r\n![box-shadow: 0 0 0 5px brown, ...;](https://cloud.githubusercontent.com/assets/1231359/9267010/50af3e54-427b-11e5-8d49-794af3e160ba.png)\r\n\r\n这样我们就得到了超过两层的 “边框” 效果了。\r\n\r\n投影的另外一个好处是，它的扩张效果是根据元素自己的形状来的。如果元素是矩形，它扩张开来就是一个更大的矩形；如果元素有圆角，它也会扩张出圆角。\r\n\r\n![多重边框与圆角](https://cloud.githubusercontent.com/assets/1231359/9267012/50b12c3c-427b-11e5-9d45-74e0b77d4550.png)\r\n\r\n所以对于圆角的场景，它也不在话下。\r\n\r\n![注意事项？](https://cloud.githubusercontent.com/assets/1231359/9267023/61d06bf4-427b-11e5-8357-cf93d1b5e98b.png)\r\n\r\n这两种方法还有什么需要注意的地方？这本书也很贴心地注明了。\r\n\r\n由于描边和投影都是不影响布局的，所以如果这个元素和其它元素的相对位置关系很重要，就需要我们以外边距等方式来为这些多出来的 “边框” 腾出位置，以防被其它元素盖住。\r\n\r\n因此，从这个意义上来说，使用内嵌投影似乎是更好的选择。因为内嵌投影让投影出现在元素内部，我们可以用内边距在元素的内部消化掉这些额外 “边框” 所需要的空间，处理起来更容易一些。\r\n\r\n![(笑脸)](https://cloud.githubusercontent.com/assets/1231359/9247192/a77ea140-41e3-11e5-8a9f-603090d53553.jpg)\r\n\r\n好的，这个例子就讲完了。\r\n\r\n（掌声。）\r\n\r\n讲到这里，我看到有些同学一脸意犹未尽的表情，你们的心情可能是这样的：\r\n\r\n![再来一个？](https://cloud.githubusercontent.com/assets/1231359/9267022/61c929ac-427b-11e5-8928-6c1a46a84708.jpg)\r\n\r\nOK，再来一个。\r\n\r\n这个例子并不是书中直接提到的，而是我在读这本书的过程中，受它启发，再结合自己的实践所想到的，这里拿出来跟大家分享。\r\n\r\n这个案例叫做：\r\n\r\n![圆润的标签页](https://cloud.githubusercontent.com/assets/1231359/9267025/621af304-427b-11e5-8770-4d5d1aadc1ab.jpg)\r\n\r\n什么叫 “圆润的标签页” 呢？\r\n\r\n标签页我们都很熟悉了，它是一种常用的 UI 元素。\r\n\r\n![三个标签页](https://cloud.githubusercontent.com/assets/1231359/9267021/61bd70bc-427b-11e5-8dca-7bb67993f292.png)\r\n\r\n我们把它拉近来看一看：\r\n\r\n![放大的标签页](https://cloud.githubusercontent.com/assets/1231359/9267037/818cac14-427b-11e5-80b2-30c05510b1ff.png)\r\n\r\n这个标签还是比较美观的，我们用圆角让它看起来很接近真实的标签造型。不过我们也注意到，它底部的两个直角看起来似乎有点生硬。\r\n\r\n所以设计师原本期望的效果可能是这样的：\r\n\r\n![所有边角均为圆弧的标签页](https://cloud.githubusercontent.com/assets/1231359/9267036/818aef64-427b-11e5-9e15-779672b79acd.png)\r\n\r\n这样就自然多了。但这看起来似乎很难实现啊！\r\n\r\n我们的难点主要在这里：\r\n\r\n![标签页的内凹处高亮](https://cloud.githubusercontent.com/assets/1231359/9267039/8249c704-427b-11e5-8394-c6c64a0a3855.png)\r\n\r\n这个特殊的形状如何实现？\r\n\r\n我们把它放大来看一下：\r\n\r\n![内凹形状](https://cloud.githubusercontent.com/assets/1231359/9267038/82123b22-427b-11e5-85e7-ba4bae0b27c9.png)\r\n\r\n首先我们可能会想到用图片。这当然是可行的，但图片有种种局限，我们最好还是完全用 CSS 来实现它。\r\n\r\n好，接下来我们来分析一下它的形状。它其实就是一个方形，再挖掉一个 90° 的扇形。于是我们试着创建一个方形，再用背景色做出一个扇形叠加上去：\r\n\r\n![实色方块与白色扇形](https://cloud.githubusercontent.com/assets/1231359/9267035/81896c48-427b-11e5-9693-ea813bb41585.png)\r\n\r\n看起来好像可以了。但这是骗人的啊！\r\n\r\n把它放在复杂背景下，立马就露馅了——扇形部分不是透明的：\r\n\r\n![内凹形状在棋盘背景上](https://cloud.githubusercontent.com/assets/1231359/9267047/9d8d05da-427b-11e5-908d-aa576818a971.png)\r\n\r\n所以，我们的问题就变成了：\r\n\r\n![如何用 CSS 实现内凹圆角？](https://cloud.githubusercontent.com/assets/1231359/9267050/9dac818a-427b-11e5-9006-06cacdfe6974.jpg)\r\n\r\n对于普通外凸的圆角，我们都已经非常熟悉了：\r\n\r\n![圆角矩形](https://cloud.githubusercontent.com/assets/1231359/9267048/9d8df1de-427b-11e5-924d-a4901df8f555.png)\r\n\r\n我们用圆角属性就可以得到：\r\n\r\n![border-radius: 20px;](https://cloud.githubusercontent.com/assets/1231359/9267049/9d911e2c-427b-11e5-8f7b-3bbf1b689bb1.png)\r\n\r\n但我们需要的是一个内凹的圆角形状。\r\n\r\n这是一个实实在在的需求，于是有开发者曾经提议，扩展圆角属性，让它支持负值。如果是负值，圆角就不再是外凸的，而是内凹的。这个提议听起来似乎很有道理，语法设计也很紧凑。\r\n\r\n![圆角矩形与 border-radius: -20px;](https://cloud.githubusercontent.com/assets/1231359/9267046/9d825126-427b-11e5-97c1-b1e4e567d193.png)\r\n\r\n但实际上它的语义不够准确。因此 CSS 工作组并没有接受这个提议，并未将它纳入标准。\r\n\r\n![NOT APPROVED](https://cloud.githubusercontent.com/assets/1231359/9267055/b20eb2a6-427b-11e5-8271-ebed88817337.png)\r\n\r\n这条路走不通，我们还需要继续探索。\r\n\r\n我们顺着这个方向，头脑中很自然地会迸出这个疑问：\r\n\r\n![CSS 还有没有其它跟圆形有关的特性？](https://cloud.githubusercontent.com/assets/1231359/9267058/b2819032-427b-11e5-9456-010aae088720.jpg)\r\n\r\n答案当然是有的：\r\n\r\n![radial-gradient() 径向渐变](https://cloud.githubusercontent.com/assets/1231359/9267056/b20f0aa8-427b-11e5-9dcd-71883b2469ab.jpg)\r\n\r\n“径向渐变” 特性就是跟圆形有关的。\r\n\r\n不过它稍稍有些复杂。在讲解径向渐变之前，我们先来看一看比较简单的 “线性渐变”。\r\n\r\n![线性渐变 - 空容器](https://cloud.githubusercontent.com/assets/1231359/9267054/b20e66c0-427b-11e5-84d1-d9a8f67e1d2e.png)\r\n\r\n说到渐变，那自然需要有一个容器。然后，还需要有两种颜色。渐变的颜色设置我们称之为 “色标”——每个色标不仅有颜色信息，还有位置信息。\r\n\r\n我们给起点和终点的色标分别设置颜色，就可以得到一条渐变图案：\r\n\r\n![线性渐变 - 渐变 1](https://cloud.githubusercontent.com/assets/1231359/9267057/b20f7632-427b-11e5-91b6-fd97a8c4d49e.png)\r\n\r\n我在这里使用了绿色来展示这个渐变，大家可能会觉得绿色很难看。实际上这是有意安排的——由于人眼对绿色的亮度变化是最为敏感的，这里使用绿色是为了让大家看得更清楚，而不是我的审美出了问题。（笑声。）\r\n\r\n接下来，关于渐变，我们其实可以设置不止两个色标。比如我们可以在中央再增加一个色标。请注意我们特意选择了跟起点色标一样的颜色。我们得到的效果如下：\r\n\r\n![线性渐变 - 渐变 2](https://cloud.githubusercontent.com/assets/1231359/9267068/c36efe66-427b-11e5-99b9-6a833f67e247.png)\r\n\r\n我们发现，渐变只发生在颜色不同的色标之间。如果两个色标的颜色相同，则它们之间会显示为一块实色。\r\n\r\n好的，我们继续增加色标。这次我们在渐变地带的中央增加一个色标，且让它的颜色和终点色标相同：\r\n\r\n![线性渐变 - 渐变 3](https://cloud.githubusercontent.com/assets/1231359/9267065/c34419bc-427b-11e5-8f40-0ebb80fac783.png)\r\n\r\n根据上面的经验，这个结果正是我们所预料的——渐变只发生在颜色不同的色标之间。\r\n\r\n接下来，我们玩点更特别的，我们把中间的两个色标相互靠近直至重合，会发生什么？\r\n\r\n![线性渐变 - 渐变 4](https://cloud.githubusercontent.com/assets/1231359/9267069/c382ad76-427b-11e5-8209-d91437f8f464.png)\r\n\r\n实际上这个渐变也会趋向于零。也就是说，虽然这本质上仍然是一个 “渐变” 图案，但经过我们的精心设计之后，我们最终得到了两个纯色的色块条纹。\r\n\r\n如果我们把终点颜色换为透明色……\r\n\r\n![线性渐变 - 渐变 5](https://cloud.githubusercontent.com/assets/1231359/9267067/c351346c-427b-11e5-8254-e5f494ea7daa.png)\r\n\r\n我们甚至还会得到实色和透明色间隔的条纹。\r\n\r\n好的，接下来我们来看径向渐变。它稍稍有些复杂，但原理是一样的。\r\n\r\n同样，我们需要有一个容器。但对径向渐变来说，顾名思议，所有色标是排布在一条半径上的。也就是说，我们还需要有一个圆心。默认情况下，圆心就是这个容器的正中心：\r\n\r\n![径向渐变 - 空容器与圆心](https://cloud.githubusercontent.com/assets/1231359/9267066/c3482f98-427b-11e5-8684-a72968f173e0.png)\r\n\r\n而这条半径就是圆心指向容器最远端的一条假想的线：\r\n\r\n![径向渐变 - 空容器、圆心与放射线](https://cloud.githubusercontent.com/assets/1231359/9267080/d469d574-427b-11e5-86b7-dd6aaccaade3.png)\r\n\r\n接下来，我们要设置一些色标：\r\n\r\n![径向渐变 - 若干色标](https://cloud.githubusercontent.com/assets/1231359/9267077/d4383e42-427b-11e5-99e1-f88aa47c182f.png)\r\n\r\n说到这里，就要讲解一下径向渐变的特别之处。所有色标的颜色变化推进不是像线性渐变那样平行推进的，而是以同心圆的方式向外扩散的——就像水池里被石子激起的涟漪那样。\r\n\r\n看到这个色标的分布，我们应该可以想像出线性渐变的结果是什么；但这里我们把它按照径向渐变的特征来推演一下，实际上最终的效果是这样的：\r\n\r\n![径向渐变 - 渐变与色标](https://cloud.githubusercontent.com/assets/1231359/9267079/d4477682-427b-11e5-87fd-8e0ad91113d2.png)\r\n\r\n我们把所有辅助性的标记都去掉，只留下渐变图案：\r\n\r\n![径向渐变 - 渐变](https://cloud.githubusercontent.com/assets/1231359/9267078/d43a3d46-427b-11e5-83d9-d0cb094ac795.png)\r\n\r\n这是一个穿了个窟窿的实色背景。很好玩是吧？不过不要忘了我们是为什么来到这儿的——我们是为了得到一个内凹圆角的形状。\r\n\r\n细心的朋友可能已经发现了，我们需要的东西已经出现了：\r\n\r\n![径向渐变 - 框出内凹部分](https://cloud.githubusercontent.com/assets/1231359/9267076/d4099cfe-427b-11e5-8974-31079609954a.png)\r\n\r\n接下来，我们调整一下圆心的位置和容器的尺寸，就可以得到这个内凹圆角的造型了。\r\n\r\n![内凹形状](https://cloud.githubusercontent.com/assets/1231359/9267087/e381623e-427b-11e5-8ce4-d2569086391e.png)\r\n\r\n利用这个技巧，我们用纯 CSS 最终实现了这个看似不可能的 “圆润的标签页” 效果！\r\n\r\n![所有边角均为圆弧的标签页](https://cloud.githubusercontent.com/assets/1231359/9267036/818aef64-427b-11e5-9e15-779672b79acd.png)\r\n\r\n（掌声。）\r\n\r\n![回顾一下](https://cloud.githubusercontent.com/assets/1231359/9267084/e3530844-427b-11e5-86d5-a9e9b1a9a5f8.jpg)\r\n\r\n好的，我们来回顾一下今天分享的主要内容：\r\n\r\n![一件趣事 | 一本书 | 两个例子](https://cloud.githubusercontent.com/assets/1231359/9267086/e3569cca-427b-11e5-8d7c-d66dbfe464d5.jpg)\r\n\r\n（现场的分享到这里就结束了。以下是因为时间关系被剪掉的片断。）\r\n\r\n![One more thing...](https://cloud.githubusercontent.com/assets/1231359/9267085/e35503c4-427b-11e5-9a66-374c06cbc6d0.jpg)\r\n\r\n关于《CSS Secrets》这本书，大家可能会有一个问题：\r\n\r\n这本书有中文版吗？\r\n\r\n![这本书的中文版？](https://cloud.githubusercontent.com/assets/1231359/9267097/f94d587a-427b-11e5-9cde-4d6f211c089f.jpg)\r\n\r\n这本书已经由国内顶尖的计算机图书公司 “图灵文化” 引进；同时，我本人也很荣幸争取到了这本书的中文版翻译权。\r\n\r\n![年内上市](https://cloud.githubusercontent.com/assets/1231359/9267096/f9495c5c-427b-11e5-8711-56cccf1050c2.jpg)\r\n\r\n在最理想的情况下，这本书的中文版在年内就可以在各大书店上架。当然，电子版会更快，图灵官网最快本月内就会发布免费试读章节。\r\n\r\n在翻译这本书的过程中，我有很多想要补充的内容，但限于篇幅，不可能在原书中插入过多的译注。因此，我萌生了一个想法——为这本书写注解。\r\n\r\n![为这本书写注解](https://cloud.githubusercontent.com/assets/1231359/9267094/f924ab50-427b-11e5-87f1-bce87dd52808.jpg)\r\n\r\n萌生这个想法有两个原因：\r\n\r\n一方面，这本书不适合初学者阅读，书中的很多难点都一笔带过了，而这些难点往往是值得展开讨论的。\r\n\r\n另一方面，书中提供的解决方案以标准为导向，极少涉及浏览器的私有属性。部分解决方案所采用的 CSS 特性太新，以致于在眼下还没有浏览器很好地实现。而实际上有些非标准的解决方案已经比较成熟了，在特定场景下往往会发挥更好的作用。我认为有必要提供这些知识，以供国内的开发者们参考。\r\n\r\n![承诺](https://cloud.githubusercontent.com/assets/1231359/9267093/f91f7324-427b-11e5-9bf7-374a68b9d1bc.jpg)\r\n\r\n在翻译完这本书之后，我一定会写。写多少字、什么时候写完，现在还不确定，但我在这里可以承诺的是，我一定会写。\r\n\r\n而且，我会以免费、开源的方式来完成这个计划。原书是需要大家自己购买的，但我写的这份注解一定会在 GitHub 上免费发布！\r\n\r\n（此处可能有掌声。）\r\n\r\n![135](https://cloud.githubusercontent.com/assets/1231359/9267095/f947da4e-427b-11e5-8d97-439b99f22968.jpg)\r\n\r\n我今天的分享到这里就结束了，大家有问题吗？\r\n\r\n***\r\n\r\n#### 相关阅读\r\n\r\n* [[幻灯片] 重拾 CSS 的乐趣（上）](https://github.com/cssmagic/blog/issues/52)\r\n* [《重拾 CSS 的乐趣》问答环节](https://github.com/cssmagic/blog/issues/53)\r\n\r\n***\r\n\r\n> #### 后记\r\n> \r\n> 我尽了最大努力，但很抱歉，这个图文加强版幻灯片的效果仍然远远不及现场演讲。下次来现场听我的技术分享吧！\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/132196912","html_url":"https://github.com/cssmagic/blog/issues/54#issuecomment-132196912","issue_url":"https://api.github.com/repos/cssmagic/blog/issues/54","id":132196912,"user":{"login":"zhengwen2013","id":3883095,"avatar_url":"https://avatars.githubusercontent.com/u/3883095?v=3","gravatar_id":"","url":"https://api.github.com/users/zhengwen2013","html_url":"https://github.com/zhengwen2013","followers_url":"https://api.github.com/users/zhengwen2013/followers","following_url":"https://api.github.com/users/zhengwen2013/following{/other_user}","gists_url":"https://api.github.com/users/zhengwen2013/gists{/gist_id}","starred_url":"https://api.github.com/users/zhengwen2013/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zhengwen2013/subscriptions","organizations_url":"https://api.github.com/users/zhengwen2013/orgs","repos_url":"https://api.github.com/users/zhengwen2013/repos","events_url":"https://api.github.com/users/zhengwen2013/events{/privacy}","received_events_url":"https://api.github.com/users/zhengwen2013/received_events","type":"User","site_admin":false},"created_at":"2015-08-18T12:51:35Z","updated_at":"2015-08-18T12:51:35Z","body":"讲的好清楚~~~"}}