【CSS in Depth 2 精譯_081】 13.1：CSS 漸變效果（下）——CSS 徑向漸變（13.1.3）+ CSS 錐形漸變（13.1.4）

當前內容所在位置（可進入專欄查看其他譯好的章節內容）

第四部分視覺增強技術 ??
【第 13 章漸變、陰影與混合模式】 ??
13.1 漸變 ??
13.1.1 使用多個顏色節點（上）
13.1.2 顏色插值方法（中）
13.1.3 徑向漸變（下） ??
13.1.4 錐形漸變（下） ??

文章目錄

- - 13.1.3 徑向漸變 Radial gradients
  - 13.1.4 錐形漸變 Conic gradients

《CSS in Depth》新版封面

《CSS in Depth》新版封面

譯者按
趁著上篇色彩空間插值算法的余興，把第一小節 CSS 漸變部分全部學完。都是些很好理解的知識點，沒什么難度。一起學起來！

13.1.3 徑向漸變 Radial gradients

線性漸變應該是您今后會用到的最常見的漸變類型了。此外，CSS 還提供了其他漸變類型，其中一個便是本節要介紹的 徑向漸變（radial gradient）。徑向漸變不是從元素的一端開始并沿著單一方向過渡到另一端，而是從一個點開始，全方位像外擴展。其基本示例如圖 13.8 所示。

圖 13.8 由某個點向外擴展的徑向漸變示意圖

【圖 13.8 由某個點向外擴展的徑向漸變示意圖】

徑向漸變可通過函數 radial-gradient() 來定義。具體示例如代碼清單 13.9 所示。試根據下列代碼同步更新本地樣式表。

代碼清單 13.9 徑向漸變基礎示例代碼

.fade {height: 200px;width: 400px;background-image: radial-gradient(white, blue); /* 從中心處的白色漸變到邊緣處的藍色 */
}

默認情況下，漸變在元素中是從中心開始，并平滑過渡到元素邊緣。漸變整體呈橢圓形，它會隨元素尺寸大小進行變化（也就是說，對于較寬的元素，其徑向漸變也較寬，反之亦然）。

與線性漸變一樣，徑向漸變同樣支持顏色節點（color stops）。您既可以設置多個節點，并利用百分比或長度單位準確定義節點在漸變中的位置；同時也可以像線性漸變一樣指定某個色彩空間。

徑向漸變函數的第一個參數還可以實現如下高級配置：

可以使用關鍵字 circle 將徑向漸變改為圓形漸變而非橢圓。若同時限定了水平與垂直尺寸，則該設置無效。
通過設置一個或兩個長度值來限定漸變的大小尺寸。若只設置一個值，則漸變會變為給定大小的圓；若設置兩個值，則分別表示水平和垂直方向上的尺寸大小。例如 radial-gradient(50px 25px, white, blue) 設置了一個寬 50px、高 25px 的頁面漸變效果。
通過指定相對于元素左上角的 x 和 y 坐標來變更徑向漸變的中心位置。該坐標需要寫到關鍵字 at 的后面。例如：radial-gradient(at 25px 25px, white, blue)。

利用 repeating-radial-gradient() 函數可以重復生成圖樣，形成同心圓環。其參數與 radial-gradient() 函數中的參數相同。

這些特性大部分可以通過典型示例解釋清楚，圖 13.9 列舉了幾個例子以及相應的樣式代碼。建議您在頁面中嘗試一下，或者修改為自己的代碼。

圖 13.9 徑向漸變典型示例

【圖 13.9 徑向漸變典型示例】

在實際開發中，我發覺很少遇到要對徑向漸變作任何復雜操作的情況，因為基本的應用形式已經能夠滿足絕大部分需求。如果想更深入地了解徑向漸變的工作原理，可以參考 MDN 相關文檔：https://mng.bz/1Gmj。

13.1.4 錐形漸變 Conic gradients

CSS 漸變的最后一個類型為 錐形漸變。相比徑向漸變從橢圓的中心向外逐漸改變顏色，錐形漸變則是沿圓形方向圍繞橢圓逐漸改變顏色。錐形漸變的一個典型示例如圖 13.10 所示。

圖 13.10 錐形漸變沿圓形方向改變顏色示意圖

【圖 13.10 錐形漸變沿圓形方向改變顏色示意圖】

錐形漸變可通過 conic-gradient() 函數、或者其重復漸變版本 repeating-conic-gradient() 來定義。該漸變的具體寫法如代碼清單 13.10 所示。

代碼清單 13.10 錐形漸變的基礎示例

.fade {height: 200px;width: 400px;background-image: conic-gradient(white, blue);
}

如本例所示，錐形漸變在漸變結束時（即最后一個顏色節點和第一個節點之間）會出現一個突然的過渡效果。這會在兩個顏色間產生硬邊緣（hard edge）。為此，可以讓首尾兩個顏色節點均為相同的顏色來解決該問題，例如寫作：conic-gradient(white, blue, white)。

與線性漸變、徑向漸變一樣，錐形漸變函數的第一個參數也可以進一步實現如下高級設置：

指定漸變的起始角度，需用 from <angle> 語法。若省略該項，則起始角默認為 0deg，即豎直朝上。例如，conic-gradient(from 90deg, white, blue, white) 將從右側 90 度位置開始漸變。
指定漸變的中心點坐標，需用 at <x-position> <y-position> 語法。x 和 y 的坐標值是相對于元素左上角測得的偏移量。例如：conic-gradient(at 30px 45px, white, blue, white)。位置參數也可以用長度值或百分比來定義。
指定顏色插值算法，需用 in <color-space> 語法，具體用法與線性漸變、徑向漸變相同。例如：conic-gradient(from 90deg in oklch, yellow, blue, yellow)。

與其他漸變函數一樣，您還可以指定顏色節點的具體位置。位置參數既可以用百分比表示，又可以寫為某角度值。建議您在測試頁面嘗試這些配置項。有關錐形漸變的更多示例，可參考 MDN 的在線文檔：https://mng.bz/PZGn。

利用圖形界面來配置漸變應該會很有幫助。推薦一個我愛用的網站資源 https://gradient.style/。它支持 OKLCH 顏色語法及 CSS 的這三種漸變類型。

前面演示的大部分示例都用到了色彩對比極為鮮明的顏色組合，這么做旨在凸顯漸變的視覺效果，讓漸變的行為特征清晰可辨；不過在實際的項目開發中，使用對比度較低的顏色組合效果往往會更好。

比如，不要從白色直接過渡到黑色，可以從白色漸變到淺灰色；或者在兩種相仿的藍色之間設置漸變。這樣不會讓用戶產生不適感。在某些特定場合下，用戶甚至都察覺不到漸變的存在，但依然可以給頁面帶來些許立體感。后面我會展示一些關于漸變的實際應用案例。不過在那之前，我們先來看看陰影。

關于《CSS in Depth》（中譯本書名《深入解析 CSS》）

	第 1 版	第 2 版
讀者評分	原版：4.7（亞馬遜）；中文版：9.3（豆瓣）	原版：5.0（亞馬遜）；中文版：暫無，待出版
出版時間	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暫無，待出版
原價	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暫無，待出版
現價	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暫無，待出版
原版國內預訂	起步價￥461.00	起步價￥750.00

本專欄為該書第 2 版高分譯文專欄，全網首發，精譯精校，持續更新，計劃今年內完成全書翻譯，敬請期待！！！

目前已完結的章節（可進入本專欄查看詳情，連載期間完全免費）：

第一章層疊、優先級與繼承（已完結）
1.1 層疊
1.2 繼承
1.3 特殊值
1.4 簡寫屬性
1.5 CSS 漸進式增強技術
1.6 本章小結

第二章相對單位（已完結）
2.1 相對單位的威力
2.2 em 與 rem
2.3 告別像素思維
2.4 視口的相對單位
2.5 無單位的數值與行高
2.6 自定義屬性
2.7 本章小結

第三章文檔流與盒模型（已完結）
3.1 常規文檔流
3.2 盒模型
3.3 元素的高度
3.4 負的外邊距
3.5 外邊距折疊
3.6 容器內的元素間距問題
3.7 本章小結

第四章 Flexbox 布局（已完結）
4.1 Flexbox 布局原理
4.2 彈性子元素的大小
4.3 彈性布局的方向
4.4 對齊、間距等細節處
4.5 本章小結

第五章網格布局（已完結）
5.1 構建基礎網格
5.2 網格結構剖析（上）
5.2.1 網格線的編號（下）
5.2.2 網格與 Flexbox 配合（下）

5.3 兩種替代語法
5.3.1 命名網格線
5.3.2 命名網格區域

5.4 顯式網格與隱式網格（上）
5.4.1 添加變化（中）
5.4.2 讓網格元素填滿網格軌道（下）

5.5 子網格（全新增補內容）
5.6 對齊相關的屬性
5.7 本章小結

第六章定位與堆疊上下文（已完結）
6.1 固定定位
6.1.1 創建一個固定定位的模態對話框
6.1.2 在模態對話框打開時防止屏幕滾動
6.1.3 控制定位元素的大小

6.2 絕對定位
6.2.1 關閉按鈕的絕對定位
6.2.2 偽元素的定位問題

6.3 相對定位
6.3.1 創建下拉菜單（上）
6.3.2 創建 CSS 三角形（下）

6.4 堆疊上下文與 z-index
6.4.1 理解渲染過程與堆疊順序（上）
6.4.2 用 z-index 控制堆疊順序（上）
6.4.3 深入理解堆疊上下文（下）

6.5 粘性定位
6.6 本章小結

第七章響應式設計（已完結）
7.1 移動端優先設計原則（上篇）
7.1.1 創建移動端菜單（下篇）
7.1.2 給視口添加 meta 標簽（下篇）

7.2 媒體查詢（上篇）
7.2.1 深入理解媒體查詢的類型（上篇）
7.2.2 頁面斷點的添加（中篇）
7.2.3 響應式列的添加（下篇）

7.3 流式布局
7.4 響應式圖片
7.5 本章小結

第八章層疊圖層及其嵌套
8.1 用 layer 圖層來操控層疊規則（上篇）
8.1.1 圖層的定義（上篇）
8.1.2 圖層的順序與優先級（下篇）
8.1.3 revert-layer 關鍵字（下篇）

8.2 層疊圖層的推薦組織方案
8.3 偽類 :is() 和 :where() 的用法
8.4 CSS 嵌套的使用
8.4.1 嵌套選擇器的使用
8.4.2 深入理解嵌套選擇器
8.4.3 媒體查詢及其他 @規則的嵌套

8.5 本章小結

第九章 CSS 的模塊化與作用域
9.1 模塊的定義
9.1.1 模塊和全局樣式
9.1.2 一個簡單的 CSS 模塊
9.1.3 模塊的變體
9.1.4 多元素模塊

9.2 將模塊組合為更大的結構
9.2.1 模塊中多個職責的拆分
9.2.2 模塊的命名

9.3 CSS 的作用域
9.3.1 CSS 作用域的就近原則
9.3.2 劃定作用域的邊界
9.3.3 CSS 中的隱式作用域
9.3.4 關于 CSS 作用域與層疊圖層

9.4 CSS 模式庫
9.5 本章小結

第十章 CSS 容器查詢
10.1 容器查詢的一個簡單示例
10.1.1 容器尺寸查詢的用法

10.2 深入理解容器
10.2.1 容器的類型
10.2.2 容器的名稱
10.2.3 容器與模塊化 CSS

10.3 與容器相關的單位
10.4 容器樣式查詢的用法
10.4.1 將模塊與所在容器解耦
10.4.2 減少重復代碼

10.5 本章小結

第 11 章顏色與對比
11.1 通過對比進行交流
11.1.1 模式的建立
11.1.2 還原設計稿

11.2 顏色的定義
11.2.1 色域與色彩空間
11.2.2 CSS 顏色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）

11.3 利用 OKLCH 處理顏色（上篇）
11.3.4 從頁面其他顏色衍生出新顏色（下篇）

11.4 思考字體顏色的對比效果
11.5 本章小結

第 12 章 CSS 排版與間距
12.1 間距設置
12.1.1 使用 em 還是 px
12.1.2 對行高的深入思考
12.1.3 行內元素的間距設置

12.2 Web 字體
12.3 谷歌字體
12.4 @font-face 的工作原理
12.4.1 字體格式與回退處理
12.4.2 同一字型的多種變體形式

12.5 性能因素考量
12.5.1 font-display 屬性解析
12.5.2 可變字體的用法

12.6 調整字間距，提升可讀性
12.6.1 正文的字間距
12.6.2 標題、小元素和間距

12.7 本章小結

附錄
附錄A：CSS 選擇器參考
附錄B：CSS 預處理器簡介