CSS 渐变（Gradients）允许你在两个或多个指定的颜色之间显示平稳的过渡。它们由浏览器生成，表现得像图像一样，通常用于 background-image 属性。
现代 CSS 中主要有三种类型的渐变：
- 线性渐变 (
linear-gradient()): 沿直线过渡颜色。 - 径向渐变 (
radial-gradient()): 从一个中心点向外过渡颜色。 - 锥形渐变 (
conic-gradient()): 围绕一个中心点旋转过渡颜色（像色轮）。
此外，每种类型都有其对应的重复版本：
repeating-linear-gradient()repeating-radial-gradient()repeating-conic-gradient()
我们将深入探讨每种类型的属性、语法、技巧，并提供大量的代码示例。
适用于大多数渐变的关键概念：
- 色标 (Color Stops) ：定义渐变中的颜色及其位置。位置可以是沿着渐变线（线性）、从中心向外（径向）或围绕中心（锥形）。
- 语法：
<color> [<percentage> | <length>]? - 示例：
red,blue 50%,green 100px。 - 如果未指定位置，颜色将均匀分布。
- 位置可以用百分比 (
%) 或固定长度 (px,em等) 指定。 - 硬停止 (Hard Stops) ：如果两个色标具有相同的位置，则会创建清晰的颜色边界，而不是平滑过渡。示例：
red 50%, blue 50%。 - 颜色中点/过渡提示 (Color Hints) ：可以建议两个色标之间过渡的中点应该在哪里。示例：
red, 70%, blue（过渡中点位于 70%，而不是默认的 50%）。
- 语法：
- 透明度 (Transparency) ：可以使用
rgba()或hsla()指定包含透明度的颜色，或者使用transparent关键字。这允许下方的元素或背景层透过渐变显示出来。 - 多重渐变背景 (Multiple Gradients) ：可以在
background-image属性中用逗号分隔来层叠多个渐变（以及其他背景图像）。列表中第一个渐变位于最顶层。你可以使用background-size、background-position、background-repeat的多值语法来分别控制每一层的尺寸、位置和重复方式。
接下来，我们将结合详细的属性和示例来分解每种类型。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 渐变示例详解</title>
<style>
/* 示例盒子的基本样式 */
body {
font-family: sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
.gradient-box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
margin: 15px;
display: inline-block;
vertical-align: top;
position: relative; /* 用于可能的伪元素 */
overflow: hidden; /* 必要时裁剪内容/渐变 */
color: #fff; /* 默认文本颜色以保证对比度 */
font-size: 14px;
text-align: center;
line-height: 1.4;
}
.gradient-box h3 {
margin: 5px 0;
padding: 5px;
background-color: rgba(0, 0, 0, 0.5); /* 半透明背景提高可读性 */
color: white;
font-size: 16px;
}
.gradient-box p {
margin: 10px;
padding: 5px;
background-color: rgba(0, 0, 0, 0.4);
}
/* 用于较大盒子的工具类 */
.large-box {
width: 400px;
height: 300px;
}
/* 用于文本渐变的工具类 */
.text-gradient-demo {
font-size: 3rem;
font-weight: bold;
display: inline-block; /* 对 background-clip 很重要 */
}
/* 特定的渐变样式从这里开始 */
/* ----------------------------------- */
/* === 1. 线性渐变 (`linear-gradient()`) === */
/* 1.1 基本的从上到下 (默认) */
.lg-basic {
/* 默认方向是 'to bottom' (到底部) */
background-image: linear-gradient(red, blue);
/* 等同于: */
/* background-image: linear-gradient(to bottom, red, blue); */
/* 等同于: */
/* background-image: linear-gradient(180deg, red, blue); */
}
/* 1.2 方向：关键字 */
.lg-direction-keyword-lr {
background-image: linear-gradient(to right, #ffcccc, #3366ff); /* 从左到右 */
}
.lg-direction-keyword-tlbr {
background-image: linear-gradient(to bottom right, orange, purple); /* 从左上到右下 */
}
.lg-direction-keyword-bl {
background-image: linear-gradient(to left, lime, cyan); /* 从右到左 */
}
/* 1.3 方向：角度 */
.lg-direction-angle-45 {
/* 0deg 指向顶部, 90deg 指向右侧, 180deg 指向底部, 270deg 指向左侧 */
background-image: linear-gradient(45deg, #fffd80, #80ff80, #80d4ff); /* 45度角 */
}
.lg-direction-angle-neg30 {
background-image: linear-gradient(-30deg, #f8a, #a8f); /* 负角度 */
}
/* 1.4 多个色标 */
.lg-multiple-stops {
/* 彩虹色，默认均匀分布 */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
/* 1.5 带位置的色标 (百分比) */
.lg-stops-percent {
background-image: linear-gradient(to right,
red 0%,
orange 20%,
yellow 40%,
green 60%,
blue 80%,
purple 100%
);
}
/* 1.6 带位置的色标 (长度) */
.lg-stops-length {
height: 300px; /* 使盒子更高以观察长度效果 */
background-image: linear-gradient(to bottom,
#ff6347 0px, /* Tomato 从顶部 0px 开始 */
#ffa500 50px, /* Orange 在 50px 处 */
#ffd700 150px, /* Gold 在 150px 处 */
#90ee90 250px, /* LightGreen 在 250px 处 */
#add8e6 300px /* LightBlue 在底部 300px 处 */
);
}
/* 1.7 不均匀分布的色标 */
.lg-uneven-stops {
background-image: linear-gradient(to right, red 10%, yellow 80%, green 95%);
/* 红色主导前10%，然后过渡到黄色直到80%，然后快速过渡到绿色直到95%，绿色填充剩余部分 */
}
/* 1.8 硬停止 (创建条纹) */
.lg-hard-stops {
background-image: linear-gradient(to right,
red 0%, red 33.3%, /* 红色条带 */
white 33.3%, white 66.6%, /* 白色条带 */
blue 66.6%, blue 100% /* 蓝色条带 */
);
}
.lg-hard-stops-angled {
background-image: linear-gradient(45deg,
#d9534f 0%, #d9534f 25%, /* 红色 */
#5cb85c 25%, #5cb85c 50%, /* 绿色 */
#5bc0de 50%, #5bc0de 75%, /* 蓝色 */
#f0ad4e 75%, #f0ad4e 100% /* 橙色 */
);
}
/* 1.9 使用透明度 (rgba) */
.lg-transparency {
background-color: #eee; /* 添加底层颜色以便观察透明效果 */
background-image: linear-gradient(to right,
rgba(255, 0, 0, 1), /* 不透明红色 */
rgba(255, 255, 0, 0.5), /* 半透明黄色 */
rgba(0, 0, 255, 0) /* 完全透明蓝色 */
);
}
/* 1.10 使用透明度 (transparent 关键字) */
.lg-transparent-keyword {
background-color: lightblue; /* 底层颜色 */
background-image: linear-gradient(to bottom left,
black,
transparent 80% /* 向左下角渐变为透明 */
);
}
/* 1.11 颜色中点/过渡提示 */
.lg-color-hint {
background-image: linear-gradient(to right,
#ff0000, /* 红色 */
80%, /* 提示：过渡中点被推向蓝色 */
#0000ff /* 蓝色 */
);
/* 与默认对比: background-image: linear-gradient(to right, #ff0000, #0000ff); */
}
/* === 2. 重复线性渐变 (`repeating-linear-gradient()`) === */
/* 2.1 基本的重复线性渐变 */
.r-lg-basic {
/* 创建每 30px 重复的条纹 */
background-image: repeating-linear-gradient(
to right,
yellow,
yellow 15px, /* 黄色持续到 15px */
brown 15px, /* 棕色从 15px 开始 */
brown 30px /* 棕色持续到 30px (一个重复单元结束) */
);
}
/* 2.2 重复倾斜条纹 */
.r-lg-angled {
/* 创建 45 度重复条纹 */
background-image: repeating-linear-gradient(
45deg,
#f0f0f0, /* 浅灰色 */
#f0f0f0 10px, /* 浅灰色持续 10px */
#e0e0e0 10px, /* 深灰色 */
#e0e0e0 20px /* 深灰色持续 10px (图案总宽度 20px) */
);
}
/* 2.3 重复透明条纹 (糖果棒效果) */
.r-lg-transparent {
background-color: white; /* 底色 */
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 10px, /* 透明部分 10px */
rgba(255, 0, 0, 0.8) 10px, /* 半透明红色开始 */
rgba(255, 0, 0, 0.8) 20px /* 半透明红色结束 (宽度 10px) */
);
}
/* === 3. 径向渐变 (`radial-gradient()`) === */
/* 3.1 基本径向渐变 (中心点, 椭圆, 最远角 - 默认值) */
.rg-basic {
/* 默认: 形状 ellipse, 大小 'farthest-corner', 位置 'center' */
background-image: radial-gradient(red, blue);
/* 等同于: */
/* background-image: radial-gradient(ellipse farthest-corner at center, red, blue); */
}
/* 3.2 形状: Circle (圆形) */
.rg-shape-circle {
background-image: radial-gradient(circle, yellow, green);
/* 圆形, 大小默认由最远角决定 */
}
/* 3.3 大小关键字 */
.rg-size-closest-side {
/* 渐变在接触到最近的边时结束 */
background-image: radial-gradient(circle closest-side, white, black);
}
.rg-size-closest-corner {
/* 渐变在接触到最近的角时结束 */
background-image: radial-gradient(ellipse closest-corner, #ffdddd, #880000);
}
.rg-size-farthest-side {
/* 渐变在接触到最远的边时结束 */
background-image: radial-gradient(circle farthest-side, cyan, navy);
}
.rg-size-farthest-corner {
/* 渐变在接触到最远的角时结束 (默认) */
background-image: radial-gradient(ellipse farthest-corner, lime, darkgreen);
}
/* 3.4 显式大小: 长度 (圆形半径) */
.rg-size-length-circle {
background-image: radial-gradient(circle 50px, yellow, orange); /* 半径为 50px 的圆形 */
}
/* 3.5 显式大小: 长度/百分比 (椭圆半径) */
.rg-size-length-ellipse {
background-image: radial-gradient(ellipse 100px 50px, lightblue, darkblue); /* 椭圆，宽100px, 高50px */
}
.rg-size-percent-ellipse {
background-image: radial-gradient(ellipse 60% 30%, #ffffcc, #cccc00); /* 椭圆，宽60%, 高30% */
}
/* 3.6 位置: 关键字 */
.rg-position-keyword {
/* 定位在左上角 */
background-image: radial-gradient(circle at top left, red, transparent);
background-color: #eee; /* 显示透明效果 */
}
.rg-position-keyword-bottom {
background-image: radial-gradient(ellipse at bottom, black, grey); /* 定位在底部中心 */
}
/* 3.7 位置: 长度/百分比 */
.rg-position-values {
/* 定位在距离左边 50px, 距离顶部 30% 的地方 */
background-image: radial-gradient(circle at 50px 30%, #f0f, #a0a);
}
/* 3.8 带位置的多个色标 */
.rg-multiple-stops {
background-image: radial-gradient(circle,
red 10%, /* 红色实心圆，半径到 10% */
yellow 30%, /* 在 10% 到 30% 之间从红色过渡到黄色 */
blue 80% /* 在 30% 到 80% 之间从黄色过渡到蓝色，蓝色填充剩余部分 */
);
}
/* 3.9 硬停止 (创建圆环) */
.rg-hard-stops {
background-image: radial-gradient(circle,
red 0%, red 20px, /* 红色内圈 (半径 0-20px) */
white 20px, white 40px, /* 白色圆环 (半径 20-40px) */
blue 40px, blue 60px, /* 蓝色圆环 (半径 40-60px) */
transparent 60px /* 外部透明 */
);
background-color: #ddd; /* 显示透明效果 */
}
/* 3.10 透明度 */
.rg-transparency {
background-color: lightcoral; /* 底色 */
background-image: radial-gradient(circle at center,
rgba(255, 255, 255, 0.8) 0%, /* 中心半透明白色 */
rgba(255, 255, 255, 0) 70% /* 向外渐变为完全透明 */
);
}
/* === 4. 重复径向渐变 (`repeating-radial-gradient()`) === */
/* 4.1 基本的重复径向渐变 */
.r-rg-basic {
/* 每 20px 重复一次黑白圆环 */
background-image: repeating-radial-gradient(circle,
black,
black 10px, /* 黑色到 10px */
white 10px, /* 白色从 10px 开始 */
white 20px /* 白色到 20px (一个重复单元结束) */
);
}
/* 4.2 带位置和大小的重复径向渐变 */
.r-rg-positioned {
background-image: repeating-radial-gradient(circle closest-side at 20% 30%, /* 圆形, 最近边, 中心在 20% 30% */
#3f87a6,
#3f87a6 10px,
#ebf8e1 10px,
#ebf8e1 20px /* 每 20px 重复 */
);
}
/* 4.3 带透明度的重复径向渐变 (靶心效果) */
.r-rg-transparent {
background-color: gold; /* 底色 */
background-image: repeating-radial-gradient(circle,
transparent 0,
transparent 15px, /* 透明圆心 (半径 0-15px) */
rgba(0, 0, 0, 0.5) 15px, /* 半透明黑色圆环开始 */
rgba(0, 0, 0, 0.5) 30px /* 半透明黑色圆环结束 (宽度 15px) */
);
}
/* === 5. 锥形渐变 (`conic-gradient()`) === */
/* 注意: 浏览器支持良好，但可能比线性和径向的普及度稍低 */
/* 5.1 基本锥形渐变 (默认: 从 0deg 开始, 在中心点) */
.cg-basic {
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
/* 颜色围绕中心点平滑过渡 */
}
/* 5.2 指定起始角度 (`from`) */
.cg-from-angle {
/* 从 90 度 (顶部中心) 开始渐变 */
background-image: conic-gradient(from 90deg, red, blue);
}
/* 5.3 指定中心位置 (`at`) */
.cg-at-position {
/* 将渐变中心定位在距离左边 25%, 距离顶部 50% 的地方 */
background-image: conic-gradient(at 25% 50%, white, black);
}
/* 5.4 带角度的色标 */
.cg-stops-angle {
background-image: conic-gradient(
red 0deg, /* 红色从 0 度 (右侧) 开始 */
yellow 90deg, /* 到 90 度 (顶部) 过渡到黄色 */
blue 180deg, /* 到 180 度 (左侧) 过渡到蓝色 */
red 360deg /* 回到红色完成圆周 */
);
}
/* 5.5 带百分比的色标 */
.cg-stops-percent {
background-image: conic-gradient(
red 0%, /* 红色从 0% 开始 */
yellow 25%, /* 到 25% (90deg) 过渡到黄色 */
blue 50%, /* 到 50% (180deg) 过渡到蓝色 */
red 100% /* 回到红色完成圆周 */
);
}
/* 5.6 硬停止 (饼图) */
.cg-hard-stops-pie {
background-image: conic-gradient(
#ff6347 0deg 90deg, /* Tomato - 第 1 象限 (25%) */
#90ee90 90deg 180deg, /* LightGreen - 第 2 象限 (25%) */
#add8e6 180deg 270deg, /* LightBlue - 第 3 象限 (25%) */
#ffd700 270deg 360deg /* Gold - 第 4 象限 (25%) */
);
border-radius: 50%; /* 使其看起来像饼图 */
width: 200px; height: 200px; /* 等宽高以形成圆形 */
}
/* 5.7 硬停止 (棋盘格) */
.cg-hard-stops-checkerboard {
background-color: #eee; /* 底色 */
/* 图案每 90 度重复一次。黑/白方块。 */
background-image: conic-gradient(
black 0deg 90deg, /* 黑色从 0 到 90 度 */
white 90deg 180deg, /* 白色从 90 到 180 度 */
black 180deg 270deg, /* 黑色从 180 到 270 度 */
white 270deg 360deg /* 白色从 270 到 360 度 */
);
/* 设置重复单元的大小 */
background-size: 80px 80px; /* 一个 2x2 棋盘格方块的大小 */
}
/* 5.8 透明度 */
.cg-transparency {
background-color: lightpink; /* 底色 */
background-image: conic-gradient(
from 45deg,
rgba(0, 0, 0, 1) 0deg 90deg, /* 不透明黑色 */
rgba(0, 0, 0, 0) 90deg 180deg, /* 渐变到透明 */
rgba(0, 0, 0, 1) 180deg 270deg, /* 不透明黑色 */
rgba(0, 0, 0, 0) 270deg 360deg /* 渐变到透明 */
);
border-radius: 50%;
width: 200px; height: 200px;
}
/* === 6. 重复锥形渐变 (`repeating-conic-gradient()`) === */
/* 6.1 基本的重复锥形渐变 (星芒效果) */
.r-cg-basic {
/* 重复一个 45 度的扇区 8 次 */
background-image: repeating-conic-gradient(
black 0deg 15deg, /* 黑色 0-15 度 */
white 15deg 30deg, /* 白色 15-30 度 */
grey 30deg 45deg /* 灰色 30-45 度 (一个重复单元结束) */
);
border-radius: 50%;
width: 200px; height: 200px;
}
/* 6.2 带透明度的重复锥形渐变 */
.r-cg-transparent {
background-color: teal; /* 底色 */
background-image: repeating-conic-gradient(
from 10deg,
transparent 0deg 5deg, /* 透明间隙 (0-5度) */
rgba(255, 255, 255, 0.7) 5deg 20deg /* 半透明白色扇区 (5-20度) */
);
/* 图案每 20 度重复一次 */
border-radius: 50%;
width: 200px; height: 200px;
}
/* === 7. 高级技巧与实用示例 === */
/* 7.1 多背景层叠 (网格图案) */
.adv-layering-pattern {
background-color: #6a8ee8; /* 底色 */
/* 顶层: 白色水平线 */
/* 底层: 白色垂直线 */
background-image:
repeating-linear-gradient( /* 水平线 */
to bottom, /* 方向 */
transparent, /* 透明 */
transparent 5px, /* 透明持续 5px */
rgba(255, 255, 255, 0.5) 5px, /* 白色线开始 */
rgba(255, 255, 255, 0.5) 10px /* 白色线结束 (5px 粗) */
),
repeating-linear-gradient( /* 垂直线 */
to right, /* 方向 */
transparent, /* 透明 */
transparent 5px, /* 透明持续 5px */
rgba(255, 255, 255, 0.5) 5px, /* 白色线开始 */
rgba(255, 255, 255, 0.5) 10px /* 白色线结束 (5px 粗) */
);
/* repeating-linear-gradient 会自动填充空间，通常无需 background-repeat */
/* 如果需要，可以用 background-size / background-position 控制 */
}
/* 7.2 多背景层叠 (细微纹理) */
.adv-layering-texture {
background-color: #444; /* 底色 */
background-image:
/* 顶层: 使用径向渐变制造微妙噪点 */
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0),
/* 底层: 非常细微的垂直渐变 */
linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
/* 控制径向 '噪点' 层 */
background-size: 3px 3px, auto; /* 平铺 3x3 的径向渐变 */
background-position: 0 0, 0 0;
background-repeat: repeat, no-repeat;
}
/* 7.3 渐变文字 */
.adv-text-gradient {
/* 将渐变应用为背景 */
background-image: linear-gradient(45deg, #ff8a00, #e52e71);
/* 使用 background-clip 将背景裁切到文字形状 */
-webkit-background-clip: text; /* Safari/Chrome 前缀 */
background-clip: text;
/* 将文字颜色设为透明，让背景渐变显示出来 */
color: transparent;
/* 为不支持 background-clip: text 的浏览器提供后备文字颜色 */
/* (可选但推荐) */
color: #e52e71;
}
/* 使后备方案更健壮 */
@supports (-webkit-background-clip: text) or (background-clip: text) {
.adv-text-gradient {
color: transparent; /* 仅在支持时将颜色设为透明 */
}
}
/* 7.4 渐变边框 (使用 `border-image`) */
.adv-border-image {
width: 280px; height: 180px; /* 调整大小 */
border: 10px solid transparent; /* 必须有边框宽度和 solid 样式 */
/* 颜色通常设为 transparent */
/* 定义渐变源 */
border-image-source: linear-gradient(to right bottom, #f0ad4e, #d9534f, #5cb85c);
/* 切割渐变图像。'1' 表示使用完整的边框宽度。 */
/* 数字对应上、右、下、左切割线 */
border-image-slice: 1;
/* 如何填充边框图像区域 (stretch, repeat, round) */
/* border-image-fill: BORDER_IMAGE_FILL; */ /* 可选: 'fill' 会使渐变也覆盖内容区域 */
/* border-image-repeat: BORDER_IMAGE_REPEAT; */ /* 可选: 'stretch'(默认), 'repeat', 'round', 'space' */
/* border-image-width: BORDER_IMAGE_WIDTH; */ /* 可选: 默认等于 border-width */
/* border-image-outset: BORDER_IMAGE_OUTSET; */ /* 可选: 将边框图像向外推 */
}
/* 注意: border-image 简写属性很复杂，通常使用单独属性更好 */
/* 7.5 渐变边框 (替代方案: Background Origin/Clip) - 更灵活 */
.adv-border-background {
width: 280px; height: 180px; /* 调整大小 */
border: 10px solid transparent; /* 透明边框 */
background-color: white; /* 内容区域的背景色 */
/* 应用到元素的渐变 */
background-image:
linear-gradient(white, white), /* 内层背景 (纯白) */
linear-gradient(to right bottom, #5bc0de, #6a8ee8, #f0f); /* 外层渐变 (边框区域) */
/* 控制背景绘制的起始位置 */
background-origin: border-box, border-box; /* 都从边框边缘开始绘制 */
/* 控制背景的裁切区域 */
/* 内层背景裁切到 padding-box (边框内部) */
/* 外层渐变裁切到 border-box (覆盖边框区域) */
background-clip: padding-box, border-box;
}
/* 7.6 使用渐变进行遮罩 (`mask-image` / `-webkit-mask-image`) */
.adv-mask-image {
width: 300px;
height: 200px;
background: url('https://via.placeholder.com/300x200/0000FF/808080?text=被遮罩的图像') center/cover no-repeat; /* 示例图片 */
/* 遮罩层: 黑色区域不透明, 白色区域透明, 灰色区域半透明 */
/* 我们使用从黑色 (可见) 到透明 (不可见) 的渐变 */
mask-image: linear-gradient(to bottom,
black 60%, /* 顶部 60% 完全可见 */
transparent 100% /* 到底部渐变为不可见 */
);
/* 需要厂商前缀以获得更广泛的兼容性 */
-webkit-mask-image: linear-gradient(to bottom,
black 60%,
transparent 100%
);
/* 可选的遮罩属性 */
/* mask-size: cover; */
/* mask-position: center; */
/* mask-repeat: no-repeat; */
}
/* 7.7 动画渐变背景 (注意性能!) */
@keyframes animated-gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.adv-animated-gradient {
background-image: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%; /* 使渐变比容器大 */
animation: animated-gradient 15s ease infinite;
}
/* 注意：直接在 @keyframes 中改变渐变颜色通常性能不佳。*/
/* 对一个较大的渐变背景进行 background-position 动画通常是更好的选择。*/
/* 使用 CSS 自定义属性 (CSS Variables) 也是一种管理方式。 */
/* 7.8 按钮悬停效果 */
.button-gradient-hover {
padding: 15px 30px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
color: white;
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
background-size: 200% auto; /* 双倍宽度 */
background-position: 0% center; /* 从左侧开始 */
transition: background-position 0.5s ease;
display: inline-block; /* 需要盒模型 */
text-align: center;
}
.button-gradient-hover:hover {
background-position: 100% center; /* 悬停时将背景移动到右侧 */
}
/* 7.9 使用重复渐变的细微背景图案 */
.adv-subtle-pattern {
height: 300px; /* 加高以看清图案 */
background-color: #f8f9fa; /* 浅色底 */
background-image:
repeating-linear-gradient(45deg, #e9ecef 0, #e9ecef 1px, transparent 1px, transparent 10px), /* 细对角线 */
repeating-linear-gradient(-45deg, #e9ecef 0, #e9ecef 1px, transparent 1px, transparent 10px); /* 细反对角线 */
/* 创建一个细微的交叉影线图案 */
}
/* 7.10 复杂层叠场景 (例如简单的天空和地面) */
.adv-scene {
height: 300px;
background-color: #87CEEB; /* 后备天蓝色 */
background-image:
/* 太阳 (径向) */
radial-gradient(circle at 80% 20%, yellow 5px, orange 15px, rgba(255,165,0,0) 50px),
/* 天空 (线性) */
linear-gradient(to bottom, #87CEEB 0%, #add8e6 70%),
/* 地面 (线性 - 定位在下方) */
linear-gradient(to bottom, #228B22 0%, #006400 100%);
/* 控制层 */
background-repeat: no-repeat, no-repeat, no-repeat; /* 所有层都不重复 */
background-position: 0 0, 0 0, 0 70%; /* 地面从距离顶部 70% 的位置开始 */
background-size: auto, auto, 100% 30%; /* 地面大小为宽度 100%, 高度 30% */
}
/* === 8. 可访问性注意事项 === */
.accessibility-contrast {
background-image: linear-gradient(to right, white, black);
color: red; /* 红色文本在渐变的某些部分对比度很差 */
}
.accessibility-contrast-ok {
background-image: linear-gradient(to right, #003366, #005599); /* 深蓝色渐变 */
color: white; /* 白色文本在这里通常有良好的对比度 */
}
/* 务必检查文本颜色与渐变背景各个部分的对比度 */
/* 浏览器开发者工具或在线对比度检查器是必不可少的工具。 */
/* === 9. 浏览器前缀 (现在需求减少，但了解有益) === */
.legacy-prefixes {
/* 针对旧 Webkit 浏览器的示例 */
/* background-image: -webkit-linear-gradient(left, red, blue); */ /* 旧语法 */
/* background-image: -webkit-linear-gradient(to right, red, blue); */ /* 较新的前缀语法 */
/* 标准语法应始终放在最后 */
background-image: linear-gradient(to right, red, blue);
}
/* 现代构建工具通常会自动处理前缀。*/
/* 通常只在需要支持非常旧的浏览器 (例如 Android 4.x, 旧版 iOS) 时才需要手动添加。 */
</style>
</head>
<body>
<h1>CSS 渐变示例详解</h1>
<h2>1. 线性渐变 (`linear-gradient()`)</h2>
<div class="gradient-box lg-basic"><h3>1.1 基本 (从上到下)</h3><p>linear-gradient(red, blue)</p></div>
<div class="gradient-box lg-direction-keyword-lr"><h3>1.2 方向 (从左到右)</h3><p>linear-gradient(to right, ...)</p></div>
<div class="gradient-box lg-direction-keyword-tlbr"><h3>1.2 方向 (左上到右下)</h3><p>linear-gradient(to bottom right, ...)</p></div>
<div class="gradient-box lg-direction-keyword-bl"><h3>1.2 方向 (从右到左)</h3><p>linear-gradient(to left, ...)</p></div>
<div class="gradient-box lg-direction-angle-45"><h3>1.3 方向 (角度 45deg)</h3><p>linear-gradient(45deg, ...)</p></div>
<div class="gradient-box lg-direction-angle-neg30"><h3>1.3 方向 (角度 -30deg)</h3><p>linear-gradient(-30deg, ...)</p></div>
<div class="gradient-box lg-multiple-stops"><h3>1.4 多个色标</h3><p>彩虹色 (均匀分布)</p></div>
<div class="gradient-box lg-stops-percent"><h3>1.5 带 % 的色标</h3><p>red 0%, orange 20%, ...</p></div>
<div class="gradient-box lg-stops-length"><h3>1.6 带长度的色标</h3><p>#ff6347 0px, #ffa500 50px, ...</p></div>
<div class="gradient-box lg-uneven-stops"><h3>1.7 不均匀色标</h3><p>red 10%, yellow 80%, green 95%</p></div>
<div class="gradient-box lg-hard-stops"><h3>1.8 硬停止 (条纹)</h3><p>red 33.3%, white 33.3%, ...</p></div>
<div class="gradient-box lg-hard-stops-angled"><h3>1.8 硬停止 (倾斜)</h3><p>45度硬停止条纹</p></div>
<div class="gradient-box lg-transparency"><h3>1.9 透明度 (rgba)</h3><p>红到透明蓝，底层 #eee</p></div>
<div class="gradient-box lg-transparent-keyword"><h3>1.10 透明度 (关键字)</h3><p>黑到 transparent，底层 lightblue</p></div>
<div class="gradient-box lg-color-hint"><h3>1.11 颜色中点</h3><p>linear-gradient(to right, red, 80%, blue)</p></div>
<h2>2. 重复线性渐变 (`repeating-linear-gradient()`)</h2>
<div class="gradient-box r-lg-basic"><h3>2.1 基本重复</h3><p>黄/棕条纹，每 30px 重复</p></div>
<div class="gradient-box r-lg-angled"><h3>2.2 重复倾斜</h3><p>45度灰色条纹，每 20px 重复</p></div>
<div class="gradient-box r-lg-transparent"><h3>2.3 重复透明</h3><p>糖果棒效果</p></div>
<h2>3. 径向渐变 (`radial-gradient()`)</h2>
<div class="gradient-box rg-basic"><h3>3.1 基本径向 (椭圆)</h3><p>radial-gradient(red, blue)</p></div>
<div class="gradient-box rg-shape-circle"><h3>3.2 形状: 圆形</h3><p>radial-gradient(circle, ...)</p></div>
<div class="gradient-box rg-size-closest-side"><h3>3.3 大小: 最近边</h3><p>circle closest-side, ...</p></div>
<div class="gradient-box rg-size-closest-corner"><h3>3.3 大小: 最近角</h3><p>ellipse closest-corner, ...</p></div>
<div class="gradient-box rg-size-farthest-side"><h3>3.3 大小: 最远边</h3><p>circle farthest-side, ...</p></div>
<div class="gradient-box rg-size-farthest-corner"><h3>3.3 大小: 最远角</h3><p>ellipse farthest-corner, ...</p></div>
<div class="gradient-box rg-size-length-circle"><h3>3.4 大小: 长度 (圆)</h3><p>circle 50px, ...</p></div>
<div class="gradient-box rg-size-length-ellipse"><h3>3.5 大小: 长度 (椭圆)</h3><p>ellipse 100px 50px, ...</p></div>
<div class="gradient-box rg-size-percent-ellipse"><h3>3.5 大小: 百分比 (椭圆)</h3><p>ellipse 60% 30%, ...</p></div>
<div class="gradient-box rg-position-keyword"><h3>3.6 位置: 关键字</h3><p>circle at top left, ...</p></div>
<div class="gradient-box rg-position-keyword-bottom"><h3>3.6 位置: 关键字</h3><p>ellipse at bottom, ...</p></div>
<div class="gradient-box rg-position-values"><h3>3.7 位置: 值</h3><p>circle at 50px 30%, ...</p></div>
<div class="gradient-box rg-multiple-stops"><h3>3.8 多个色标 %</h3><p>red 10%, yellow 30%, blue 80%</p></div>
<div class="gradient-box rg-hard-stops"><h3>3.9 硬停止 (圆环)</h3><p>red 20px, white 40px, blue 60px</p></div>
<div class="gradient-box rg-transparency"><h3>3.10 透明度</h3><p>半透明白色中心淡出</p></div>
<h2>4. 重复径向渐变 (`repeating-radial-gradient()`)</h2>
<div class="gradient-box r-rg-basic"><h3>4.1 基本重复</h3><p>重复黑白圆环</p></div>
<div class="gradient-box r-rg-positioned"><h3>4.2 重复定位</h3><p>重复圆环，偏移中心</p></div>
<div class="gradient-box r-rg-transparent"><h3>4.3 重复透明</h3><p>靶心效果，底层 gold</p></div>
<h2>5. 锥形渐变 (`conic-gradient()`)</h2>
<div class="gradient-box cg-basic"><h3>5.1 基本锥形</h3><p>conic-gradient(red, ..., red)</p></div>
<div class="gradient-box cg-from-angle"><h3>5.2 起始角度</h3><p>conic-gradient(from 90deg, ...)</p></div>
<div class="gradient-box cg-at-position"><h3>5.3 中心位置</h3><p>conic-gradient(at 25% 50%, ...)</p></div>
<div class="gradient-box cg-stops-angle"><h3>5.4 带角度色标</h3><p>red 0deg, yellow 90deg, ...</p></div>
<div class="gradient-box cg-stops-percent"><h3>5.5 带 % 色标</h3><p>red 0%, yellow 25%, ...</p></div>
<div class="gradient-box cg-hard-stops-pie"><h3>5.6 硬停止 (饼图)</h3><p>4 个象限，border-radius 50%</p></div>
<div class="gradient-box cg-hard-stops-checkerboard"><h3>5.7 硬停止 (棋盘格)</h3><p>需要 background-size</p></div>
<div class="gradient-box cg-transparency"><h3>5.8 透明度</h3><p>交替不透明/透明扇区</p></div>
<h2>6. 重复锥形渐变 (`repeating-conic-gradient()`)</h2>
<div class="gradient-box r-cg-basic"><h3>6.1 基本重复 (星芒)</h3><p>重复 45 度扇区</p></div>
<div class="gradient-box r-cg-transparent"><h3>6.2 重复透明</h3><p>透明间隙产生 '射线' 效果</p></div>
<h2>7. 高级技巧与实用示例</h2>
<div class="gradient-box large-box adv-layering-pattern"><h3>7.1 层叠 (网格图案)</h3><p>重复水平/垂直线</p></div>
<div class="gradient-box large-box adv-layering-texture"><h3>7.2 层叠 (细微纹理)</h3><p>噪点 + 微妙暗角</p></div>
<div class="gradient-box">
<h3>7.3 渐变文字</h3>
<span class="text-gradient-demo adv-text-gradient">渐变文字</span>
</div>
<div class="gradient-box adv-border-image"><h3>7.4 渐变边框 (border-image)</h3><p>使用 border-image-source</p></div>
<div class="gradient-box adv-border-background"><h3>7.5 渐变边框 (background-clip)</h3><p>更灵活的替代方案</p></div>
<div class="gradient-box adv-mask-image"><h3>7.6 使用渐变遮罩</h3><p>图像底部淡出</p></div>
<div class="gradient-box adv-animated-gradient"><h3>7.7 动画渐变</h3><p>移动 background-position (性能!)</p></div>
<div class="gradient-box">
<h3>7.8 按钮悬停</h3>
<span class="button-gradient-hover">悬停我</span>
</div>
<div class="gradient-box large-box adv-subtle-pattern"><h3>7.9 细微背景图案</h3><p>重复对角线</p></div>
<div class="gradient-box large-box adv-scene"><h3>7.10 复杂场景</h3><p>太阳、天空、地面层叠</p></div>
<h2>8. 可访问性注意事项</h2>
<div class="gradient-box accessibility-contrast"><h3>8.1 对比度差</h3><p>红色文本在黑白渐变上部分难读</p></div>
<div class="gradient-box accessibility-contrast-ok"><h3>8.2 对比度较好</h3><p>白色文本在深蓝渐变上通常可读</p></div>
<h2>9. 浏览器前缀</h2>
<div class="gradient-box legacy-prefixes"><h3>9.1 旧版前缀</h3><p>如果需要，标准语法应放最后</p></div>
</body>
</html>中文小结与解释:
- HTML 结构 : 设置了带有特定类名的
div元素，用于应用不同的渐变样式。包含标题和段落以提供上下文信息。 - 基本样式 : 为演示框 (
.gradient-box) 提供了宽度、高度、边框和边距等基础样式。 - 线性渐变 (
linear-gradient) :- 演示了默认方向 (
to bottom，即从上到下)。 - 展示了关键字方向（
to right,to bottom right等）和角度方向（45deg,-30deg）。 - 说明了多个色标的用法，包括均匀分布和指定百分比/长度位置的情况。
- 解释了硬停止（Hard Stops）如何创建实色条带。
- 展示了如何使用
rgba()和transparent实现透明效果。 - 包含了一个颜色中点（Color Hint）的示例，用于控制过渡的中心点。
- 演示了默认方向 (
- 重复线性渐变 (
repeating-linear-gradient): 展示了如何创建水平、倾斜以及带透明度的重复图案（如条纹）。 - 径向渐变 (
radial-gradient) :- 涵盖了基本语法和默认行为（椭圆、最远角、中心点）。
- 展示了如何指定形状 (
circle，圆形）。 - 解释了大小关键字（
closest-side,farthest-corner等）和显式大小（长度、百分比）。 - 演示了使用关键字（
top left）和值（50px 30%）进行定位。 - 包含了多个色标、硬停止（圆环）和透明度的示例。
- 重复径向渐变 (
repeating-radial-gradient): 创建重复同心圆环的示例，包括定位和透明变化。 - 锥形渐变 (
conic-gradient) :- 介绍了围绕中心点进行颜色过渡的基本语法。
- 展示了如何设置起始角度 (
from) 和中心位置 (at)。 - 说明了使用角度 (
deg) 和百分比 (%) 定义色标。 - 演示了硬停止的应用，如创建饼图和棋盘格（结合
background-size）。 - 包含了透明度的示例。
- 重复锥形渐变 (
repeating-conic-gradient): 展示了如何创建重复的楔形图案（如星芒效果）以及使用透明度。 - 高级技巧 (
Advanced Techniques) :- 层叠 (Layering) : 在
background-image中用逗号分隔组合多个渐变（线性/径向/锥形），创建复杂的图案和纹理。需要为每一层仔细设置background-size,background-position,background-repeat。 - 渐变文字 (Gradient Text) : 使用
background-image,background-clip: text, 和color: transparent实现。包含了后备方案和@supports检查。 - 渐变边框 (Gradient Borders) : 展示了两种方法：
border-image（可能较复杂）和更灵活的background-clip: padding-box, border-box技术。 - 遮罩 (Masking) : 使用
mask-image（及-webkit-mask-image）配合渐变来选择性地隐藏元素的一部分（例如，使图片淡出）。 - 动画 (Animation) : 通过动画化超大渐变的
background-position来实现平滑效果，优于直接动画化渐变颜色（强调了性能考量）。 - 按钮悬停 (Button Hover) : 一种常见的 UI 技巧，使用
background-size和background-position的过渡。 - 细微图案 (Subtle Patterns): 使用微弱的重复渐变创建背景纹理。
- 复杂场景 (Complex Scenes): 层叠不同类型和位置的渐变来构建简单的图形场景。
- 层叠 (Layering) : 在
- 可访问性 (Accessibility): 简要说明了检查文本与渐变背景之间对比度的重要性。
- 浏览器前缀 (Vendor Prefixes) : 提到了历史上需要添加前缀（
-webkit-,-moz-等），但指出现在已不那么关键，不过标准语法应始终放在最后。