当前位置：首页 > news >正文

【CSS in Depth 2 精译_081】 13.1：CSS 渐变效果（下）——CSS 径向渐变（13.1.3）+ CSS 锥形渐变（13.1.4）

news 来源：原创 2025/6/8 21:31:29

当前内容所在位置（可进入专栏查看其他译好的章节内容）

第四部分视觉增强技术 ✔️
【第 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 预处理器简介

文章目录

13.1.3 径向渐变 Radial gradients

13.1.4 锥形渐变 Conic gradients

相关文章：