颜色、背景与边框 — 四种颜色写法与第一个「像样部件」¶

这一章讲两件事: 「颜色」这个看起来最简单的概念,其实在 CSS 里有四种等价写法, 各适合什么场合;以及背景不一定是颜色、盒子的边可以玩出多少花样—— 纯色、图片、渐变、边框、圆角、阴影。读完你能独立做出一个现代风格的「卡片」部件。需要的基础:会写规则、会选类(本拆解 02 章)。

1. 这一章讲什么¶

第 03 章管的是字的颜色;这一章把颜色用到盒子上——背景、边框、阴影—— 并引入全书第一个「组合多个工具」的产物:卡片。它在全书链条的位置:第 ④ 级台阶。 会装饰单个盒子之后,第 05 章才回答「盒子们怎么摆」。

2. 顶层全景:从「怎么写颜色」到「一个卡片」¶

  一种颜色,四个写法:颜色名 / HEX / RGB / HSL        ← 等价,任选
        │
        ├─ 背景:纯色 → 图片(三条配套属性)→ 渐变(线性/径向)
        ├─ 边框:简写 border = 宽度 + 样式 + 颜色,可分四边
        ├─ 圆角:border-radius,50% 得正圆
        └─ 阴影:box-shadow(盒子)/ text-shadow(文字)
              │
              ▼
        组合产物:一个现代卡片(白底、细边、圆角、淡阴影)

  图说:上半页是「词汇表」,下半页是「造句」——卡片就是全部词汇的一次造句练习。

3. 核心原理¶

颜色四写法:一个颜色的四种语言¶

书里开头就立了框架:CSS 给文字、背景、边框等应用颜色有四个主入口¹。这四种写法完全等价——写哪个是自由,读懂别人的是义务:

① 颜色名。 red、blue、darkgreen、coral……直觉最好, 标准颜色名有 140 多个²。适合快速试验和教学,但精确配色时不够用。

② HEX 码。 形如 #3498db——井号后跟 6 个十六进制字符 (0–9 加 A–F,共十六个符号)³。六个字符其实是三对:前一对红、中间一对绿、后一对蓝, 每对从 00(没有)到 FF(拉满)。所以 #ffffff 是白(三对全满)、#000000 是黑(三对全空)。书里还教了一个速记:三对各自重复时可以缩成三位——#ffcc00 能写成 #fc0⁴。

③ RGB。 形如 rgb(255, 99, 71)——红、绿、蓝各给一个 0–255 的数⁵。 0 是这路颜色一点不掺,255 是拉满;(0,0,0) 黑、(255,255,255) 白。它和 HEX 是同一信息的两种记法:#ff6347 就是 rgb(255, 99, 71)—— 255 写成十六进制正好是 FF。要透明就用 rgba()(RGB 加 Alpha):rgba(0, 0, 0, 0.5) = 半透明黑, 第四个数 0(全透)到 1(全不透明)。

④ HSL。 形如 hsl(200, 100%, 40%),三个数分别是色相(0–360°,颜色在色环上的位置)、 饱和度(0–100%,越高越艳)、亮度(0–100%,越高越白)⁶。书里给了它一个很高的评价:「更人性化」——因为它按人调色直觉组织: 「想要更蓝一点」动色相,「想要淡一点」动亮度。手动调颜色时 HSL 明显顺手; HEX/RGB 想调淡一点,你得三个数一起心算。透明版是 hsla()。

一个拿来校准的例子: 番茄红 rgb(255, 99, 71)(书里的例子)—— HEX #ff6347,HSL 约 hsl(9, 100%, 64%)。三个写法,一个颜色。 (HEX↔RGB 的换算是按定义推的,HSL 换算值是近似,换算过程是为演示编的步骤,数值等价关系成立。)

背景:纯色 → 图片 → 渐变¶

背景可以叠三层花样,由简到繁:

① 纯色。 body { background-color: #f9f9f9; }——浅灰底⁷。

② 图片。 background-image: url('images/background.jpg') 引入一张图, 但引入只是第一步,图片默认会平铺(像地砖一样重复),所以书里配了三条配套属性⁸:

配套属性	它的作用
`background-size: cover;`	让图铺满整个背景区(宁可裁掉一点边)
`background-repeat: no-repeat;`	关掉平铺,只放一张
`background-position: center;`	图在背景区居中

四条一起写,大图才能安稳地当背景。书里有个提醒值得记住: 背景图一定要在小屏(手机)上测——图可能意外缩小或被裁⁹。 cover 的「宁可裁边也要铺满」在手机窄屏上正是裁剪高发区。

③ 渐变。 两种书里都给了¹⁰:

header { background: linear-gradient(to right, #00c6ff, #0072ff); }  /* 线性:从左到右 */
div    { background: radial-gradient(circle, #f06, white); }        /* 径向:从圆心向外 */

线性渐变括号里的第一个值是方向(to right、to bottom、to top right……), 后面跟两个以上颜色,浏览器负责在它们之间平滑过渡。 关键认知:渐变不是图片——它纯粹由 CSS 算出来,零图片文件、零下载, 想改色改方向都是一行的事。

边框、圆角、阴影:盒子的三种「妆」¶

边框(border)——简写三件套。 border: 2px solid black; 一条顶三条: 宽度 + 样式 + 颜色,顺序随意但三者都要有¹¹。样式除了 solid(实线)还有 dashed(虚线)、dotted(点线)、double(双线),以及书里列出但实战罕见的 groove、ridge、inset、outset(立体槽纹那一族)¹²。还能按边单设:border-top: 2px solid red; 只给上边画线——做「标题下划一条线」这类效果全靠它¹³。

圆角(border-radius)——现代感的来源。 border-radius: 10px; 让盒子的四个角变圆, 值越大越圆。两个书里点破的技巧:可以只圆某一个角 (border-top-left-radius: 10px;);方盒子 + border-radius: 50% = 正圆—— 头像就是这么做的¹⁴。为什么 50% 是正圆?半径从角开始算,50% 时相邻两条边的圆弧正好在边中点相接。

阴影——两种,都要省着用。 盒子的 box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 四个数是:x 偏移、y 偏移、模糊半径、颜色——「向右 2px、向下 2px、模糊 8px 的淡黑影」¹⁵。文字的 text-shadow 同格式。书里的警告很直白:阴影用多了,设计会显得又重又糊¹⁶—— 现代界面流行极淡的阴影(像例子里透明度 0.2 这种),就是这条教训的产物。

主线例子:一个卡片,全部工具走一遍¶

本章的主线例子是书末「Styling a Card」。HTML 只有三行, CSS 把本章每一件工具都用了一次:

<div class="card">
  <h2>Welcome</h2>
  <p>This box uses colors, borders, and shadows!</p>
</div>

.card {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 20px;
  width: 300px;
  margin: 20px auto;
  text-align: center;
}
.card h2 { color: #2c3e50; }

每一行声明在卡片上动的那一刀:

声明	动的是哪一层	读者看到
`background-color: #ffffff`	盒子底	纯白底(注意:`#fff` 是速写法)
`border: 1px solid #ddd`	边	一圈 1px 浅灰细线,把卡片框出来
`border-radius: 8px`	四个角	角变圆——「现代感」的主要来源
`box-shadow: 0 2px 6px rgba(0,0,0,0.1)`	盒子外	正下方一团极淡的阴影,卡片像浮在页面上
`padding: 20px`	内容外、边框内	文字不贴边,四周留 20px 白(第 05 章详讲这层)
`width: 300px; margin: 20px auto`	盒子自身与外侧	宽 300px;上下留 20px、左右 auto = 水平居中
`.card h2 { color: #2c3e50 }`	卡片里的标题	深蓝灰标题,与黑正文分层

(全部数值来自原书练习。)这张卡片是全书第一个「像现代网页」的东西: 在此之前你只会改文字;从这行代码起,你做出的部件开始有「产品感」。而它用到的每一件工具,本章都单独讲过了——卡片不是新知识,是复习。 顺带指出一处本章埋的伏笔:margin: 20px auto 让盒子水平居中是全网页最常用的布局技巧, 但「为什么 auto 会居中」要到第 05 章盒模型才讲得清——现在照抄即可。

4. 作者的判断与证据¶

判断:HSL「更人性化」。 这是本章少有的主观评价,面向的是人调色的场景⁶。它成立的条件是「你在手动配色」;如果是从设计稿取色(复制现成的 HEX),四种写法无差别。
判断:阴影要少用。 原话:「Use shadows carefully — too many can make your design look heavy or blurry.」¹⁶ 经验之谈,可在任何过度使用阴影的页面上当场验证。
判断:背景图要在手机上测。 来自实践经验,机理是 cover 的裁边行为在小屏上更激进⁹。
事实性内容:四种颜色写法的格式与边界(140+ 颜色名、HEX 六位可缩三位、RGB 0–255、 HSL 三个数的范围)、边框样式清单、阴影四参数的顺序,均可当场验证。

5. 边界与局限¶

透明度只教了 rgba()/hsla() 的写法,没教「alpha 到底是什么」。 它就是 0–1 的不透明度, 0.5 = 半透明;原书没给这个名字的念法,我们这里补上(补充,不在书里,来自通用知识)。
background 一串属性的合并简写没讲。 书里逐条写 background-image/size/repeat/position, 其实它们能合并成一条 background: ...——合并写法的顺序规则较绕,原书刻意绕开了。
渐变的更多玩法没展开。 多色渐变、色标位置(控制每种颜色过渡到哪里)、锥形渐变, 都只字未提;to right 这一行够初学者用很久。
margin: auto 居中的原理欠着。 本章照抄使用,原理归第 05 章——原书的分工如此,我们照接。
配色方法论没有。 怎么挑协调的颜色(色轮、对比度)超出了这本小册子的范围, 书末第 07 章只指了工具(Color Hunt、Coolors)不指方法。

6. 可带走的¶

本章主线例子,一行写完: .card 七条声明各动一刀(白底、1px 灰边、8px 圆角、淡阴影、20px 内留白、300px 宽、auto 居中)→ 一个默认灰盒子变成浮在页面上的现代卡片。

一个颜色四种等价写法:颜色名(140+,快而糙)、HEX(三对十六进制,#fc0 可缩写)、 RGB(0–255 三数)、HSL(色相/饱和度/亮度,手动调色最顺手);
HEX 与 RGB 是同一信息的两种进制:255 十六进制就是 FF;
透明 = rgba() / hsla() 的第四个数,0(全透)到 1(全不透);
背景三件套配套:size: cover + repeat: no-repeat + position: center,大图才安稳;
渐变(linear-gradient / radial-gradient)是 CSS 算出来的,零图片文件;
border 简写 = 宽度 + 样式 + 颜色;可按边单设(border-top 只画上边);
border-radius: 50% 把方盒子变成正圆——头像标准做法;
box-shadow 四个数 = x 偏移、y 偏移、模糊、颜色;淡一点,用少了高级、用多了又重又糊。

7. 原文地图¶

主题	原书章	原文位置
四种颜色应用方式	Chapter 4: Colors, Backgrounds, and Borders	`text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:14`(搜「apply colors」)
140+ 颜色名	同上	`text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:22`(搜「140 standard color names」)
HEX 格式与三位缩写	同上	`text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:32`(搜「followed by 6 characters」) · `text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:35`(搜「#fc0」)
RGB 0–255 与 rgba 透明	同上	`text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:37`(搜「Red, Green, Blue」) · `text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:45`(搜「rgba()」)
HSL 三数与人性化	同上	`text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:50`(搜「Hue, Saturation」)
背景图三条配套属性	同上	`text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:75`(搜「fill the screen」) · `text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:80`(搜「mobile screens」)
两种渐变	同上	`text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:88`(搜「linear-gradient」) · `text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:96`(搜「radial-gradient」)
border 简写与样式清单	同上	`text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:104`(搜「shorthand format」) · `text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:115`(搜「groove, ridge」)
按边单设	同上	`text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:119`(搜「border-top」)
圆角、单角、50% 正圆	同上	`text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:130`(搜「perfect circle」)
阴影格式与慎用警告	同上	`text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:143`(搜「x-offset」) · `text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:152`(搜「too many」)
主线例子:卡片	同上	`text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:163`(搜「card」) · `text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:165`(搜「300px」)

出处:「Chapter 4: Colors, Backgrounds, and Borders」第 12–14 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:14,搜「apply colors」)。原文:「CSS gives you four main ways to apply colors to text, backgrounds, borders, and more」。 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 21–23 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:22,搜「140 standard color names」)。原文:「There are over 140 standard color names like blue, gray, darkgreen, coral, and more.」 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 31–33 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:32,搜「followed by 6 characters」)。原文:「A HEX code begins with # followed by 6 characters (0–9, A–F).」「#ffffff is white, #000000 is black.」三对分别是红绿蓝、每对 00–FF 的解读是按十六进制颜色定义补的(补充,不在书里,来自通用知识)。 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 34–35 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:35,搜「#fc0」)。原文:「If all 6 characters are repeated (e.g., #ffcc00), you can write it as #fc0.」 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 36–48 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:37,搜「Red, Green, Blue」;:45,搜「rgba()」)。原文:「Defines color by mixing Red, Green, Blue values (0–255)」「You can also add transparency using rgba()」;rgb(0, 0, 0) = black、rgb(255, 255, 255) = white。 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 49–58 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:50,搜「Hue, Saturation」)。原文:「HSL = Hue, Saturation, Lightness. It’s more human-friendly!」三个数的范围:Hue 0–360、Saturation 0–100%、Lightness 0–100%。 ↩↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 61–66 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:66,搜「light gray」)。原文:「This sets the page’s background to a light gray tone.」 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 67–81 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:75,搜「fill the screen」)。原文三条:「Makes the image fill the screen」「Prevents tiling」「Centers the image」。 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 80–81 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:80,搜「mobile screens」)。原文:「Always test background images on mobile screens — they can shrink or crop unexpectedly.」 ↩↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 82–96 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:88,搜「linear-gradient」;:96,搜「radial-gradient」)。原文:「Gradients let you fade between two or more colors — without using an image.」方向取值:to bottom、to left、to top right 等。 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 98–108 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:104,搜「shorthand format」)。原文:「The border shorthand format is: border: [width] [style] [color];」 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 110–115 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:115,搜「groove, ridge」)。原文列出:solid、dashed、dotted、double、groove, ridge, inset, outset。 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 116–120 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:119,搜「border-top」)。原文示例:「border-top: 2px solid red; border-bottom: 1px dotted #ccc;」 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 122–134 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:130,搜「perfect circle」)。原文:「Want a perfect circle? Make the radius 50% on a square element」——.profile-pic { border-radius: 50%; }。单角写法见第 129 段(搜「top-left-radius」)。 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 136–146 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:143,搜「x-offset」)。原文:「Format: box-shadow: x-offset y-offset blur color;」示例 box-shadow: 0 4px 12px rgba(0,0,0,0.15)。 ↩
出处:「Chapter 4: Colors, Backgrounds, and Borders」第 152–153 段(text/05-ch04-chapter-4-colors-backgrounds-and-borders.txt:152,搜「too many」)。原文:「Use shadows carefully — too many can make your design look heavy or blurry.」 ↩↩