深入理解CSS中的Gradient

一、渐变的基本概念

渐变（Gradients）是 CSS 中实现平滑色彩过渡的高效工具，不同于单一纯色，它通过融合两种或多种颜色生成连续过渡的视觉效果，属于图像类型，可应用于所有支持图像值的 CSS 属性，如 background、border-image 和 list-style-image 等。

CSS 主要支持三类渐变：线性渐变（linear-gradient），颜色沿直线方向过渡；径向渐变（radial-gradient），颜色以圆心为中心呈放射状扩散；以及圆锥渐变（conic-gradient），颜色围绕中心点呈扇形旋转过渡，各具独特视觉表现力。

渐变的优势：

• 比图片更灵活，可动态调整。

• 体积更小，加载更快。

• 支持无限缩放，不会失真。

• 可通过 CSS 动态控制。

二、线性渐变 (linear-gradient)

线性渐变是在一条直线上创建颜色过渡效果，是最常用的渐变类型。

2.1 基本语法

background: linear-gradient([direction] color-stop1, color-stop2, ...);

2.2 方向控制（direction）

• 关键字方向：to top、to right、to bottom、to left、to top right、to bottom left等。

• 角度方向：使用角度值（如 45deg、135deg），0deg 表示从下到上，顺时针递增。

记忆口诀: 方向看终点，角度顺时转。

• 方向关键字：用 to + 终点方向 表示（默认是 to bottom，即从上到下）。

• 角度值：用 度数(deg) 表示（0° 向上，顺时针递增）。

注意：

• 方向关键字是「终点方向」，不是起始方向（如 to right 是从左到右，不是从右到左）。

• 角度是顺时针递增（0°向上，90°向右，180°向下）。

• 颜色停止点的 顺序 决定渐变流向，需按视觉顺序排列

2.3  颜色停止点

颜色停止点定义了渐变中的颜色及其位置：

• 基本形式：color 或 color position。

• 位置可以是百分比（如 50%）或长度值（如 100px）。

• 位置可选，默认均匀分布。

记忆口诀：颜色+位置，顺序别乱置

• 格式：颜色1 [位置1], 颜色2 [位置2], ... （位置可选）。

• 位置：可用 百分比(%) 或 长度值(px/em) ，不写则均匀分布。

例如：

• red, blue → 红到蓝均匀渐变。

• red 0%, yellow 50%, blue 100% → 红→黄→蓝（黄在中间）。

• red 20px, blue 80px → 红从20px开始，蓝到80px结束。

2.4 示例分析

.gradient-border {
    border: 3px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(to right, #4e73df, #1cc88a) border-box;
    border-radius: 10px;
}

这个示例展示了 渐变边框技术 ：

• 第一层 linear-gradient(white, white) padding-box：创建白色背景，限制在内容区域。

• 第二层 linear-gradient(to right, #4e73df, #1cc88a) border-box：创建从蓝到绿的渐变，应用到边框区域。

• 通过 border: 3px solid transparent 实现透明边框，让渐变背景显示出来。

三、径向渐变 (radial-gradient)

径向渐变从一个中心点向外辐射，创建圆形或椭圆形的颜色过渡。

3.1 基本语法

background: radial-gradient([[shape] [size] [at position],] start-color, ..., last-color);

核心结构拆解：

radial-gradient( [形状+大小] [at 位置] , 颜色停止点列表 )。

3.2 关键参数

• shape：渐变形状，circle（圆形）或 ellipse （椭圆形，默认）。

• size：渐变大小，可选值：

  • closest-side：到最近边。

  • farthest-side：到最远边。

  • closest-corner：到最近角。

  • farthest-corner：到最远角（默认）。

• position：中心点位置，如 at 50% 50%（默认）或 at center top 。

形状+大小部分

记忆口诀：「形状圆或椭，大小看边缘」。

位置部分

记忆口诀：「位置用 at，同背景定位」。

• 格式：at + 位置值（默认 at center 居中）

• 位置值：和 background-position 完全一致，支持：

  • 关键字：top/center/bottom + left/center/right （如 at top left 左上角）。

  • 百分比：at 20% 80% （X轴20%，Y轴80%）。

  • 长度值：at 50px 100px （X轴50px，Y轴100px）。

颜色停止点列表

记忆口诀：「同线性渐变，颜色+位置」

• 格式与 linear-gradient() 完全相同：颜色1 [位置1], 颜色2 [位置2], ...

• 位置可选，不写则均匀分布（默认 0% 到 100%）。

参数组合规则

记忆口诀：「形状大小不分家，位置要加 at」

• 形状和大小可 任意组合（顺序不严格，但习惯「形状在前，大小在后」）：

  • 例如：circle closest-side、ellipse farthest-corner。

• 位置必须用 at 引出，且 放在形状+大小之后：

  • 例如：circle at center、ellipse closest-side at 20% 30%。

易错点提醒

• 形状和大小关键字 不要加逗号（如错误：circle,closest-side ，正确（circle closest-side）。

• 位置必须用 at 前缀（如错误：center，正确：at center）。

• 大小关键字是描述「渐变边缘到容器边缘的距离」，不是渐变本身的尺寸。

3.3 示例

/* 基本径向渐变 */
background: radial-gradient(red, yellow, green);

/* 指定形状和位置 */
background: radial-gradient(circle at top left, red, yellow, green);

/* 控制大小 */
background: radial-gradient(circle farthest-corner at 100px 50px, red, yellow, green);

四、圆锥渐变 (conic-gradient)

圆锥渐变围绕中心点旋转，创建类似于色轮的效果，颜色沿圆周分布。

4.1 基本语法

background: conic-gradient([from angle] [at position],] color-stop1, color-stop2, ...);

核心结构拆解：

conic-gradient( [from 起始角度] [at 中心点位置] , 颜色停止点列表 )

4.2 关键参数

• from angle：可选，起始角度（如 from 45deg）。

• at position：可选，中心点位置（如 at 50% 50%）。

• 颜色停止点：可以使用角度值（如red 45deg）。

起始角度部分（可选）

记忆口诀：「from 加角度，渐变从这起」

• 格式：from <角度值> （默认是 from 0deg ，即指向右侧）。

• 角度：用 度数(deg) 表示（顺时针递增，0° 指向右，90° 指向底，180° 指向左，270° 指向上）。

• 例如：

  • from 90deg → 渐变从底部（90°方向）开始。

  • from 135deg → 渐变从右下（135°方向）开始。

中心点位置部分（可选）

记忆口诀：「at 加位置，圆心在这里」

• 格式：at <位置值> （默认是 at center，即元素中心点）。

• 位置：与 background-position 语法一致，可用：

  • 关键字：center、top、right、bottom、left。

  • 百分比/长度值：50% 50% （等价于 center）、20px 30px 等。

  • 例如：

    • at top left → 圆心在元素左上角。

    • at 30% 60% → 圆心在元素水平30%、垂直60%的位置。

颜色停止点列表（必选）

记忆口诀：「颜色+角度，绕圈来排列」

• 格式：颜色1 [角度1], 颜色2 [角度2], ...（角度可选）。

• 角度：用 度数(deg) 表示，不写则均匀分布（360°均分颜色数量）。

  • 例如：

  • red, blue → 红到蓝绕圈均匀渐变（0°-180°红，180°-360°蓝）。

  • red 0deg, yellow 90deg, green 180deg, blue 270deg, red 360deg → 完整色轮（红→黄→绿→蓝→红）。

  • red 0%, yellow 25%, green 50%, blue 75%, red 100% → 用百分比也可（等价于度数，100% = 360°）。

易错点提醒

• 默认起始角度是 0deg （指向右），不是 90deg（注意和 linear-gradient 的默认方向区分）。

• 默认中心点是 at center （元素中心），不是左上角。

• 颜色停止点的角度是 绝对角度（相对于 0° 方向），不是相对上一个颜色的差值。

• 要实现「硬边界」效果（如饼图的色块分割），需让前后颜色的角度值连续（如red 90deg, blue 90deg）。

4.3 示例

/* 基本圆锥渐变 */
background: conic-gradient(red, yellow, green, blue, purple, red);

/* 指定起始角度和位置 */
background: conic-gradient(from 45deg at center, red, yellow, green);

/* 精确控制颜色位置 */
background: conic-gradient(from 0deg, red 0deg, yellow 90deg, green 180deg, blue 270deg, red 360deg);

五、重复渐变

重复渐变可以创建图案效果，有三种类型：

• repeating-linear-gradient：重复线性渐变。

• repeating-radial-gradient：重复径向渐变。

• repeating-conic-gradient：重复圆锥渐变。

5.1 核心规律：

核心规律：重复渐变 = 基础渐变 + 可重复单元。

所有重复渐变的参数结构与对应基础渐变 完全一致，唯一区别是：

• 颜色停止点的位置必须形成一个「可重复的单元」（即结束位置 < 基础渐变的最大范围），浏览器会自动重复这个单元填满整个区域。  

5.2 快捷记忆法

5.2.1 repeating-linear-gradient （重复线性渐变）

• 基础结构：repeating-linear-gradient( 方向/角度 , 颜色停止点列表 )。

• 记忆口诀：「线性参数不变，颜色区间要短」。

• 方向/角度：与 linear-gradient 完全相同（to right、45deg等）。

• 颜色停止点：必须形成一个「小于100%/完整长度」的区间（否则无法重复），例如：

  • repeating-linear-gradient(to right, red 0px, blue 20px) → 红蓝条纹（0-20px为一个单元，重复填充）。

  • repeating-linear-gradient(45deg, red 0%, yellow 10%, green 20%) → 红→黄→绿（0-20%为单元，45°方向重复）。

5.2.2 repeating-radial-gradient （重复径向渐变）

• 基础结构：repeating-radial-gradient( [形状] [大小] [at 中心点] , 颜色停止点列表 )。

• 记忆口诀：「径向参数不变，颜色半径要短」。

• 形状/大小/中心点：与 radial-gradient 完全相同（circle、farthest-corner、at center等）。

• 颜色停止点：必须形成一个「小于最大半径」的区间（用长度值或百分比），例如：

  • repeating-radial-gradient(circle at center, red 0px, blue 20px) → 同心圆条纹（0-20px半径为单元）  。

  • repeating-radial-gradient(ellipse at top left, red 0%, yellow 10%, green 20%) → 椭圆渐变（0-20%半径为单元）

5.2.3 repeating-conic-gradient （重复圆锥渐变）

• 基础结构：repeating-conic-gradient( [from 起始角度] [at 中心点] , 颜色停止点列表 )。

• 记忆口诀：「圆锥参数不变，颜色角度要短」。

• 起始角度/中心点：与 conic-gradient 完全相同（from 0deg、at center等）。

• 颜色停止点：必须形成一个「小于360°」的角度区间，例如：

  • repeating-conic-gradient(red 0deg, blue 45deg) → 红蓝扇形（0-45°为单元，绕圈重复）。

  • repeating-conic-gradient(from 90deg at top right, red 0deg, yellow 10deg, green 20deg) → 从90°开始的三色扇形（0-20°为单元） 。

5.3 关键对比：重复渐变 vs 基础渐变

示例

/* 重复线性渐变 */
background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
/* 重复径向渐变 */
background: repeating-radial-gradient(circle at center, red 0px, blue 20px);
/* 重复圆锥渐变 */
background: repeating-conic-gradient(from 0deg, red 0deg, red 10deg, blue 10deg, blue 20deg);

六、渐变的高级应用

6.1 多层渐变叠加

可以在一个元素上应用多个渐变，通过逗号分隔：

background: 
    linear-gradient(45deg, rgba(255,0,0,0.5), rgba(255,0,0,0),
    radial-gradient(circle at top right, blue, green));

6.2 渐变与透明度

结合 rgba() 或 hsla() 可以创建半透明渐变效果：

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,0.8), rgba(255,0,0,0));

6.3 渐变遮罩

使用 mask-image 属性可以创建渐变遮罩效果：

.masked-element {
    background: url(image.jpg);
    mask-image: linear-gradient(to right, black, transparent);
    -webkit-mask-image: linear-gradient(to right, black, transparent);
}

6.4 渐变文字

通过 -webkit-background-clip: text 实现渐变文字效果：

.gradient-text {
    background: linear-gradient(to right, #4e73df, #1cc88a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

6.5 使用圆锥渐变和动画

.animated-gradient-border {
    border: 4px solid transparent;
    background: linear-gradient(white, white) padding-box,
                conic-gradient(from 0deg, red, yellow, green, blue, purple, red) border-box;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

七、渐变与颜色空间

CSS 渐变支持不同的颜色空间进行插值计算，影响颜色过渡的效果：

• 默认：使用 sRGB 颜色空间。

• lab：更符合人类视觉感知的颜色空间。

• oklab：改进版的 lab 颜色空间，提供更自然的过渡。

• lch：基于 lab 的圆柱坐标表示。

• oklch：改进版的 lch 颜色空间。

示例：

/* 使用 oklab 颜色空间 */
background: linear-gradient(in oklab, red, blue);

/* 使用 lch 颜色空间 */
background: linear-gradient(in lch, 0 100% 50%, 180 100% 50%);

CSS颜色空间缩写全称

sRGB：Standard Red Green Blue（标准红绿蓝）。

Lab：（也写作L*a*b*或CIELAB）：Commission Internationale de l'Éclairage L*a*b*

oklab：Perceptually uniform Oklab color space

LCH：也写作L*C*h*或CIELCH）：Commission Internationale de l'Éclairage L*C*h*

oklch：Perceptually uniform OkLCH color space

sRGB

• 由Microsoft和HP于1996年联合开发的标准RGB颜色空间。

• 是网页和大多数数字显示设备的默认颜色空间。

Lab

• 由国际照明委员会(CIE)于1976年定义的颜色空间。

• L表示亮度，a表示从绿色到红色的范围，b表示从蓝色到黄色的范围。

• 旨在模拟人类视觉感知的颜色空间。

oklab

• 由Björn Ottosson于2020年开发的感知均匀颜色空间。

• 是Lab颜色空间的改进版本，提供更好的感知均匀性和计算效率。

LCH

• 同样由国际照明委员会(CIE)定义的颜色空间。

• 是Lab颜色空间的极坐标表示形式。

• L表示亮度，C表示色度（饱和度），h表示色相角。

oklch

• 基于oklab颜色空间的极坐标表示形式。

• 结合了oklab的感知均匀性和LCH的直观色彩控制（亮度、色度、色相）。

• 是CSS中推荐使用的现代颜色空间之一，特别适合需要精确色彩控制的场景。

八、浏览器兼容性

• 现代浏览器都支持基本的渐变功能。

• 圆锥渐变 (conic-gradient) 需要较新的浏览器版本。

• 颜色空间功能 (in oklab, in lch) 是较新的 CSS 特性，需要检查兼容性。

九、最佳实践

• 性能考虑：复杂的渐变可能影响渲染性能，特别是在移动设备上。

• 可访问性：确保渐变颜色有足够的对比度，特别是用于文本背景时。

• 简洁性：尽量使用简洁的语法，避免不必要的复杂渐变。

• 测试：在不同浏览器和设备上测试渐变效果。

• 回退方案：为不支持渐变的旧浏览器提供纯色回退。

/* 带回退方案的渐变 */
background: #4e73df; /* 回退颜色 */
background: linear-gradient(to right, #4e73df, #1cc88a);

总结

CSS 渐变是创建丰富视觉效果的强大工具，通过掌握线性渐变、径向渐变和圆锥渐变的用法，结合高级技巧如渐变边框、渐变文字等，可以极大地提升网页的视觉吸引力。同时，了解渐变的性能影响和浏览器兼容性，有助于创建既美观又实用的网页设计。

彩蛋

本文在Cnb平台上全面展示了CSS 渐变的示例代码，欢迎访问《CSS渐变完整演示》以获取更多详细内容。