CSS魔法
总目录
## 《CSS 揭秘》总目录 章节编号 | 章节标题 | 试读样章 [1] | 官方电子版 [2] | 注解 [3] :---:|---|:---:|:---:|:---: 000| 译者序|[试读](https://github.com/cssmagic/CSS-Secrets/issues/23)| [免费阅读 ↗](http://www.ituring.com.cn/book/tupubarticle/9387)|- | | 003| 本书收到的赞誉|[试读](https://github.com/cssmagic/CSS-Secrets/issues/21)| [免费阅读 ↗](http://www.ituring.com.cn/book/tupubarticle/9386)|- | | 030| **原书推荐序**|[试读](https://github.com/cssmagic/CSS-Secrets/issues/9)|...
在浏览器特性参差不齐的大环境下，“渐进增强” 与 “平稳退化” 是一种务实的策略。因此，在编写华丽样式的同时，我们还需要想好退路，为功能较弱的浏览器提供 fallback（回退样式）。 总的来说，我们应该利用 CSS 自身的机制来组织回退样式，而不是依赖 CSS hack 来实现。  举个例子，设计师要求某个元素的背景色显示为半透明的黑色（如上图所示）。但我们都知道，低版本 IE 等浏览器并不支持 RGBA 颜色，因此对于这些浏览器，我们需要将它的背景色设置为最接近设计意图的纯黑色。那么在这里，半透明黑色是我们期望的 “理想样式”，而纯黑色则是用来兜底的 “回退样式”。 在搞清楚状况之后，我们很快写出了下面的代码： ```stylus background: rgba(0,0,0,0.75); background: #000\9; ``` 这段代码的意图是这样的：第一条声明是我们理想的样式，写给标准浏览器；第二条声明是专门写给 IE 的 CSS...
购买方式
## 纸质书 * 原价： 99.00 元（实际零售价约为八折左右） * 购买渠道： * [京东](https://item.jd.com/13305034.html)（推荐） * [当当](http://product.dangdang.com/23953090.html) * [亚马逊](https://www.amazon.cn/dp/B01ET3FO86) * [China-Pub](http://product.china-pub.com/4942111) ## 电子版 * 定价： 49.99 元 * 购买渠道：[图灵官网](http://www.ituring.com.cn/book/1695) 独家发售。（关于电子版的疑问请参见 [FAQ 中的相关段落](https://github.com/cssmagic/CSS-Secrets/issues/16#e-book-more)） ##...
## 花絮与注解 #### 第 10 页 · 第三段 > 举例来说，要把表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需利用 `inherit` 的特性即可 “表单元素” 指的是输入框、按钮等元素。 为什么要把表单元素的字体设定为 “与页面的其他部分相同”？为什么表单元素不能自动从祖先元素那里继承字体样式？这是因为在浏览器的默认样式中，通常已经给表单元素指定了字体样式。当一个元素自身已经指定某个属性之后，就无法从祖先元素那里继承了。 #### 第 12 页 · 最后一行 > ——在 Iterations 中实践响应式设计 Iterations 是 Basecamp 公司的一个内部管理工具。...
## 花絮与注解 #### 第 205 页 ‧ 最后一行 > GIF 图片的所能使用的颜色数量被限制在 **256 色**。 在翻译这句话时，我对原文做了一些省略。原文是这样的： > They are limited to a **256 color palette**, **shared across all frames**. 我省略了后半句，原因在于原文有误。如果 GIF 动画采用...
## 花絮与注解 #### 第 199 页 ‧ 第二段 > 所有这五种曲线都是通过（三次）贝塞尔曲线来指定的…… 关于 “贝塞尔曲线” 的更多信息，请参见：https://zh.wikipedia.org/wiki/貝茲曲線 。 #### 第 200 页 ‧ “致敬” 区块 > 在 Dan Eden 编写的 animate.css 动画库中，所用到的调速函数分别是 `cubic-bezier(.215,.61,.355,1)` 和...
## 花絮与注解 #### 第 111 页 ‧ 警告栏 > 在编写本书时，**SCSS** 还没有原生支持三角函数。如果想正常使用三角函数，你就需要用到 [Compass 框架](http://compass-style.org) 或其他库。借助泰勒展开式，你其实还可以自己写一套三角函数的实现…… 关于 “泰勒级数”（Taylor Series）和 “泰勒展开式”（Taylor Expansion），可以参考 [维基百科的相关条目](https://zh.wikipedia.org/wiki/%E6%B3%B0%E5%8B%92%E7%BA%A7%E6%95%B0)。 关于在 Sass 中用泰勒展开式实现三角函数，可以参考这个代码片断： [SCSS/SASS module calculating sin/cos/tan using Taylor Expansion](https://gist.github.com/kamikat/c4d472ce3c61feec6376)...
## 花絮与注解 #### 第 191 页 ‧ 第一段 > 有一个具有块级样式的页脚（比如它设置了背景或阴影）…… 这里的 “块级样式” 指那些可以突显出整个元素的块级范围的样式。 这句话的原文是： > a footer with any block-level styling, such as a background or shadow... 这句话我最开始的翻译是 “有一个页脚，它的整个块级范围都填满了一层背景或阴影……”。 试读样章发布之后，收到了微博网友...
## 花絮与注解 #### 第 187 页 ‧ 第二个列表项 > 如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。 它的底部也会超出视口，只不过我们可以通过页面滚动来查看超出视口的内容。但顶部超出视口的内容就完全没有办法了。 在这个方案中，如果希望这个垂直居中的元素居有停留在视口中央的效果（比如它是一个对话框），我们往往会把 `absolute` 换成 `fixed`。此时，如果这个元素的超高的话，则它底部超出视口的区域也将无法看到了，因为它已经不会随着页面的滚动而滚动了。 #### 第 187 页 ‧ 最后一个列表项 > 在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因为元素可能被放置在半个像素上。这个问题可以用 `transform-style: preserve-3d` 来修复，不过这个修复手段也可以认为是一个 hack，而且很难保证它在未来不会出问题。 这种现象往往出现在以下两种条件下： * 元素的宽度或高度是奇数像素值，因此引擎在计算...
## 花絮与注解 #### 第 48 页 · 第一段 > 原因是 `background-origin` 的默认值是 `padding-box`，因此，图片的显示尺寸不仅取决于 padding box 的尺寸，而且被放置在了 padding box 的原点（左上角）。 此时背景图片的显示尺寸取决于 padding box 的尺寸，原因在于元素设置了 `background-size: cover` 样式。这个属性的行为是在保持图片的宽高比不变的前提下，先把图片缩小至无穷小，再尝试逐渐拉伸图片，当图片刚刚好可以覆盖住元素时定形。 说到 “覆盖住元素”，还是那句话，实际上需要覆盖住的是元素的 “背景定位区域”。而元素的背景定位区域是由 `background-origin`...