勘误表

[cssmagic]

如何提交勘误？  

如果你在阅读本书的过程中发现任何错误（包括编辑、排版、翻译、技术等方面的错误），请新开一个 issue 来描述这个错误，并请在标题中注明 “提交勘误”。当编辑或译者确认为错误后，将会收录到本页面中。

感谢你的严谨让这本书变得圆满，其他读者必将从中受益！

中文版勘误  

图标含义

• ✅ - 已在后续印次中修正。
• ⚠️ - 尝试在后续印次中修正，但仍有错误。
• ▶️ - 已被出版社确认，即将在后续印次中修正。
• 🕒 - 有待出版社确认。

标记含义

• 下划线 - 仅用于标注需要修改的部分，以便对照，并非排版格式。（但遗憾的是，GitHub 并不支持下划线样式的显示。我们需要使用其它 Markdown 编辑器打开本文的源码，才能看到效果。）

⚠️ 第 xxiv 页 · 本页的两个代码块

本页有两个代码块，均包含以下这行代码：

background: linear-gradient(90deg, yellow, red);

其中 90deg 应为 0deg。

^{（贡献者：@yifon）}

⚠️ 注意：在某些印次中，所有线性渐变的声明（包括加了浏览器前缀的属性）中的 90deg 都被改成了 0deg，这是错误的。只有无前缀的声明需要改，加前缀的声明不需要改。

▶️ 第 14 页 · 第二段

……它们为 CSS 的编写提供提供了一些便利……

“提供提供” 应为 “提供”。

^{（贡献者： 图灵社区 Skyline555）}

✅ 第 30 页 · 第二段

对于一个 45° 的直角三角形来说，它的两条直角边是等长的，因此这个算式会变成 。

句末的算式应为 。

^{（贡献者：@cssmagic）}

✅ 第 44 页 · 第三段

……这样的结果显明更有随机的感觉……

“显明” 应为 “明显”。

^{（贡献者： 图灵社区 Taipa）}

▶️ 第 45 页 · 脚注

构成相对质数的这些数字没有公约数

“没有公约数” 应为 “没有公约数（除了 1 以外）”。

^{（贡献者：微信网友 “剑猫情缘”）}

▶️ 第 45 页 · “相对质数” 一词

• 第一段：

  为了让最小公倍数最大化，这些数字最好是 “相对质数”

  应改为 “……这些数字最好是 ‘互质’ 的”

  举例来说，3、4 和 5 是相对质数

  应改为 “……3、4 和 5 是互质的”

  要达成相对质数，……

  应改为 “要达成互质关系，……”

  因为质数跟其他任意数字都是相对质数。

  应改为 “因为质数跟其他任意数字都是互质的”

• 脚注

  相对质数是一种数字之间的关系

  应改为 “互质是一种数字之间的关系”

  构成相对质数的这些数字……

  应改为 “构成互质关系的这些数字……”

  比如说，10 和 27 是相对质数……

  应改为 “比如说，10 和 27 是互质的……”

  ……一个质数跟其他所有数字都可以构成相对质数。

  应改为 “……一个质数跟其他所有数字都可以构成互质关系。”

^{（贡献者：微信网友 “剑猫情缘”）}

▶️ 第 45 页 · 关于 “互质” 的表述

在上一条勘误的基础上，需要把关于 “互质” 的表述写得再严格一些：

• 第一段：

  质数跟其他任意数字都是互质的

  应表述为 “质数跟其他任意（不是自己倍数的）数字都是互质的”。

• 脚注

  一个质数跟其他所有数字都可以构成互质关系

  应改为 “一个质数跟其他所有（不是自己倍数的）数字都可以构成互质关系”

^{（贡献者：微信网友 “PiB”）}

🕒 第 48 页 · 第三个代码块

	background:
		linear-gradient(white, white) padding-box,
		url(stone-art.jpg) border-box 0 / cover;

0 应为 0 0。

^{（贡献者：@galliliu）}

🕒 第 59 页 · 唯一的代码块

    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 页 · 倒数第二个代码块

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）}

▶️ 第 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; 之上添加一行：

    content: '';

^{（贡献者：@OfficialYoungX）}

✅ 第 169 页 · 第二个代码块 · 第 5 行

slider.insertBefore(img, div);

本行应为：

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）}

▶️ 第 218 页 · 图 8-28 的说明文字

……而当用户的鼠标移到图上时，它会缓慢地向左滚动……

改为 “……而当用户的鼠标移到图上时，图片会缓慢地向左滚动……”

^{（贡献者： 图灵社区 Alex.）}

🕒 第 218 页 · 图 8-28 的说明文字

……圆形区域显露出的是图片的右半部分……

“右半部分” 应为 “左半部分”。

^{（贡献者：@zhuxinghan）}

---

英文原书勘误表  

by O’Reilly Media, Inc.

• 出版社已确认的
• 待确认的

[ghost]

第28页 第一个淡紫色背景的代码框

background: linear-gradient(#fb3, #58a);

此淡紫色背景代码框中的代码没有垂直居中

第32页 灵活的同色系条纹段落下的代码框

background:repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);`

此处代码应该加淡紫色背景

第33页 第一个淡紫色背景的代码框

background: #58a;

此淡紫色背景代码框中的代码没有垂直居中

（持续更新……）

[cssmagic]

@HDMing
❤️ 谢谢反馈！已收录到 “勘误表 - 排版失误” 中。

另建议新开 issue 来提交勘误。

[ourfeel]

第61页
width 的值应该设置为414.4213562px 不是 %

[cssmagic]

@ourfeel
这里的 “单位” 应该是 %，但简体中文版确实把数字搞错了。已更新到主帖，谢谢反馈。 👍

另建议新开 issue 来提交勘误。