---
title: "勘误表"
issue: 2
---
> #### 如何提交勘误？
>
> 如果你在阅读本书的过程中发现任何错误（包括编辑、排版、翻译、技术等方面的错误），[请新开一个 issue](https://github.com/cssmagic/CSS-Secrets/issues/new) 来描述这个错误，并请在标题中注明 “提交勘误”。当编辑或译者确认为错误后，将会收录到本页面中。
>
> 感谢你的严谨让这本书变得圆满，其他读者必将从中受益！
## 中文版勘误
> #### 图标含义
>
> * ✅ - 已在后续印次中修正。
> * ⚠️ - 尝试在后续印次中修正，但仍有错误。
> * ▶️ - 已被出版社确认，即将在后续印次中修正。
> * 🕒 - 有待出版社确认。
>
> #### 标记含义
>
> * 下划线 - 仅用于标注需要修改的部分，以便对照，并非排版格式。（但遗憾的是，GitHub 并不支持下划线样式的显示。我们需要使用其它 Markdown 编辑器打开[本文的源码](https://raw.githubusercontent.com/cssmagic/CSS-Secrets/master/doc/corrigenda.md)，才能看到效果。）
### ⚠️ 第 xxiv 页 · 本页的两个代码块
本页有两个代码块，均包含以下这行代码：
> ```stylus
> background: linear-gradient(90deg, yellow, red);
> ```
其中 `90deg` 应为 `0deg`。
（贡献者：@yifon）
> ⚠️ **注意**：在某些印次中，所有线性渐变的声明（包括加了浏览器前缀的属性）中的 `90deg` 都被改成了 `0deg`，这是错误的。只有无前缀的声明需要改，加前缀的声明不需要改。
### ▶️ 第 14 页 · 第二段
> ……它们为 CSS 的编写提供提供了一些便利……
“提供提供” 应为 “提供”。
（贡献者： 图灵社区 [Skyline555](http://www.ituring.com.cn/users/228349)）
### ✅ 第 30 页 · 第二段
> 对于一个 45° 的直角三角形来说，它的两条直角边是等长的，因此这个算式会变成 。
句末的算式应为 。
（贡献者：@cssmagic）
### ✅ 第 44 页 · 第三段
> ……这样的结果显明更有随机的感觉……
“显明” 应为 “明显”。
（贡献者： 图灵社区 [Taipa](http://www.ituring.com.cn/users/142654)）
### ▶️ 第 45 页 · 脚注
> 构成相对质数的这些数字**没有公约数**
“**没有公约数**” 应为 “**没有公约数**（除了 1 以外）”。
（贡献者：微信网友 “剑猫情缘”）
### ▶️ 第 45 页 · “相对质数” 一词
* 第一段：
> 为了让最小公倍数最大化，这些数字最好是 “相对质数”
应改为 “……这些数字最好是 ‘互质’ 的”
> 举例来说，3、4 和 5 是相对质数
应改为 “……3、4 和 5 是互质的”
> 要达成相对质数，……
应改为 “要达成互质关系，……”
> 因为**质数跟其他任意数字都是相对质数**。
应改为 “因为**质数跟其他任意数字都是互质的**”
* 脚注
> *相对质数*是一种**数字之间的关系**
应改为 “*互质*是一种**数字之间的关系**”
> 构成相对质数的这些数字……
应改为 “构成互质关系的这些数字……”
> 比如说，10 和 27 是相对质数……
应改为 “比如说，10 和 27 是互质的……”
> **……一个质数跟其他所有数字都可以构成相对质数。**
应改为 “**……一个质数跟其他所有数字都可以构成互质关系。**”
（贡献者：微信网友 “剑猫情缘”）
### ▶️ 第 45 页 · 关于 “互质” 的表述
在上一条勘误的基础上，需要把关于 “互质” 的表述写得再严格一些：
* 第一段：
> 质数跟其他任意数字都是互质的
应表述为 “质数跟其他任意（不是自己倍数的）数字都是互质的”。
* 脚注
> 一个质数跟其他所有数字都可以构成互质关系
应改为 “一个质数跟其他所有（不是自己倍数的）数字都可以构成互质关系”
（贡献者：微信网友 “PiB”）
### 🕒 第 48 页 · 第三个代码块
> ```css
> background:
> linear-gradient(white, white) padding-box,
> url(stone-art.jpg) border-box 0 / cover;
> ```
`0` 应为 `0 0`。
（贡献者：@GalliLiu）
### 🕒 第 59 页 · 唯一的代码块
> ```css
> transform: skew(45deg);
> ```
`45deg` 应为 `-45deg`。
（贡献者：@sanqianwdj）
### ⚠️ 第 61 页 · 第二段
> 因此，把 `max-width` 的值设置为  是很合理的……
算式右侧的 “414.421 356 2%” 应为 “141.421 356 2%”。
（贡献者：@ourfeel）
> ⚠️ **注意**：在某些印次中，“141.421 356 2%” 被错误地改成了 “141.421 356 2 px”。
### ▶️ 第 65 页 · 倒数第二个代码块
> ```css
> background:
> linear-gradient(-45deg, transparent 15px, #58a 0)
> right,
> linear-gradient(45deg, transparent 15px, #655 0)
> left;
> ```
此条声明中的 `#58a` 和 `#655` 应互换。
（贡献者：@ArvinTung）
### 🕒 第 69 页 · 第一段
> ……只要图案边缘处的颜色是 `#58` 就行……
`#58` 应为 `#58a`。
（贡献者：@zhuxinghan）
### ▶️ 第 70 页 · 第二段
> ……但有着它自已独有的局限……
“自已” 应为 “自己”。
（这是译者 @cssmagic 在提交译稿时出现的笔误，向大家致歉！）
### ▶️ 第 70 页 · 第二段
> ……（它会以元素自身的宽高作为基数度进行换算）……
“基数度” 应为 “基数”。
（贡献者：@zhuxinghan）
### 🕒 第 87 页 · 第一个列表项
> 以该元素相同的尺寸和位置……
考虑到正确的表述结构应为 “与……相同”，这一句存在语病。因此改为：“参照该元素的尺寸和位置……”。
（贡献者：@zhuxinghan）
### 🕒 第 90 页 · 正文第一段
> ……因为 `border-radius` 会无耻地忽视透明部分……
`border-radius` 应为 `box-shadow`。
（这是译者 @cssmagic 在提交译稿时出现的笔误，向大家致歉！）
（贡献者：图灵社区 [WooJane](http://www.ituring.com.cn/space/286062)）
### ▶️ 第 108 页 · 图 4-31
> `cosθ = y/r`
>
> `sinθ = x/r`
图中公式中的 `cos` 应为 `sin`，`sin` 应为 `cos`。
（贡献者：@peacelee）
### 🕒 第 111 页 · 唯一的代码块
代码块的右上角应加上 “SCSS” 标记。
（贡献者：@zhuxinghan）
### ▶️ 第 114 页 · 第二段
> ……其实不管怎样，这本来就是你早该做好的份内之事。
“份内” 应为 “分内”。
（贡献者：@zhuxinghan）
### 🕒 第 120 页 · 倒数第二段
> 有一个办法可以解决这个问题，那就是用 `background-position` 把向条纹向底部移动 `.5em`……
“把向条纹” 应为 “把条纹”。
（贡献者：@zhuxinghan）
### 🕒 第 129 页 · 顶部的 “背景知识” 区块
> ……`background-sizetext-shadow`……
`background-size` 和 `text-shadow` 之间应加逗分进行分隔。
（贡献者：@zhuxinghan）
### ▶️ 第 134 页 · 第一段
> ……因为我们只需要使用 `text-shadows` 属性的扩张参数就可让投影变大，然后看起来就像给文字勾边了一样。
需作如下修正：
* `text-shadows` 应为 `text-shadow`。
* “就可” 最好改为 “就可以”。
（这是译者 @cssmagic 在提交译稿时出现的笔误，向大家致歉！）
### 🕒 第 154 页 · 唯一的代码块
需在 `position: fixed;` 之上添加一行：
```css
content: '';
```
（贡献者：@OfficialYoungX）
### ✅ 第 169 页 · 第二个代码块 · 第 5 行
> ```js
> slider.insertBefore(img, div);
> ```
本行应为：
```js
slider.insertBefore(div, img);
```
（原载于英文原书勘误表，中文版整理者：@keyfoxth）
### 🕒 第 169 页 ‧ 侧栏的 “小提示” 区块
> 用 `input:in-range` 来代替简单的 `input` 选择符，是为了**只在浏览器支持范围输入控件时才对它设置样式**。然后，我们就可以利用层叠机制……
应改为：“如果用 `input:in-range` 来代替简单的 `input` 选择符，就可以**只在浏览器支持范围输入控件时才对它设置样式**。进而可以利用层叠机制……”
（这是译者 @cssmagic 的翻译错误，向大家致歉！）
### 🕒 第 178 页 · 第一个列表项
> ……如果列表中只有少量列表项，我们可以为第一项展示出多行预览文字……
“第一项” 应为 “每一项”。
（贡献者：@zhuxinghan）
### ⚠️ 第 184 页 · 第四段
> 如果把 `width` 这一行声明注释掉，你会发现其实没有影响。……只有把 width 显式地设置为 900px 之外（或大或小）的其他值，我们才有可能看出区别。
应为：
“如果把 `max-width` 这一行声明注释掉，你会发现其实没有影响。……只有把容器的 `width` 属性指定为 900px 之外（或大或小）的其他值，我们才有可能看出区别。”
（原载于英文原书勘误表，中文版整理者：@cssmagic）
> ⚠️ **注意**：在某些印次中，前半句没有修改。
### ▶️ 第 198 页 · 最后一段
> ……我们希望下落方向上的调速函数是加速的（`ease-out`），而弹起方向上是减速的（`ease-in`）……
`ease-out` 和 `ease-in` 应对调。
（贡献者： 图灵社区 [406298102](http://www.ituring.com.cn/users/232377)）
### ▶️ 第 218 页 · 图 8-28 的说明文字
> ……而当用户的鼠标移到图上时，它会缓慢地向左滚动……
改为 “……而当用户的鼠标移到图上时，图片会缓慢地向左滚动……”
（贡献者： 图灵社区 [Alex.](http://www.ituring.com.cn/users/170355)）
### 🕒 第 218 页 · 图 8-28 的说明文字
> ……圆形区域显露出的是图片的右半部分……
“右半部分” 应为 “左半部分”。
（贡献者：@zhuxinghan）
***
## 英文原书勘误表
> by O’Reilly Media, Inc.
* [出版社已确认的](http://www.oreilly.com/catalog/errata.csp?isbn=0636920031123)
* [待确认的](http://www.oreilly.com/catalog/errataunconfirmed.csp?isbn=0636920031123)