CSS3 渐变(Gradients)知识大全
编程小白的渐变效果入门指南 – 告别静态背景，拥抱多彩设计
渐变是什么？
想象一下日出时天空颜色的变化——从深蓝到橙色再到黄色，这就是自然界中的渐变！在CSS中，渐变(Gradients)就是让两种或多种颜色之间创建平滑过渡的效果。
为什么要用渐变？
以前为了实现颜色过渡效果，必须使用图片。现在直接用CSS就能创建渐变，好处是：
- 减少网站加载时间（不需要下载图片）
- 更好地适配不同屏幕尺寸
- 修改颜色更方便快捷
- 可以创建更复杂的图案效果
1. 线性渐变 (Linear Gradients)
最简单的一种渐变，颜色沿着一条直线变化。就像梯子一样，从起点到终点均匀过渡。
从左到右的渐变 (to right)
基本语法：
background: linear-gradient(方向, 颜色1, 颜色2, …);
方向可以用：
- to top / to bottom / to left / to right
- 角度：0deg（从下到上）, 90deg（从左到右）
- to top right（对角线方向）
可以设置多个颜色节点，比如创建彩虹效果：
彩虹渐变效果
2. 径向渐变 (Radial Gradients)
从一个中心点向外扩散的渐变，就像石头扔进水里形成的涟漪。
圆形径向渐变
基本语法：
background: radial-gradient(形状 大小 at 位置, 颜色1, 颜色2, …);
主要参数：
- 形状：circle（圆形）或 ellipse（椭圆）
- 位置：center（默认）, top, bottom, 或具体坐标
- 大小：closest-side, farthest-corner等
自定义中心的径向渐变
3. 圆锥渐变 (Conic Gradients)
围绕一个中心点旋转的渐变，像色轮或饼图一样。
圆锥渐变色轮
基本语法：
background: conic-gradient(起点角度 at 位置, 颜色1, 颜色2, …);
特点：
- 默认从12点钟位置开始
- 适合创建饼图、色轮等效果
- 可以设置每个颜色的起始角度
试试这个饼图效果：
background: conic-gradient(#e74c3c 0% 25%, #3498db 25% 60%, #2ecc71 60% 100%);
圆锥渐变饼图
4. 重复渐变 (Repeating Gradients)
让渐变模式不断重复，就像壁纸的重复图案一样。
重复的线性渐变
类型：
- repeating-linear-gradient()
- repeating-radial-gradient()
- repeating-conic-gradient()
关键是要定义好颜色变化的区间，这样才会形成重复效果。
重复的径向渐变
注意：重复渐变需要定义明确的中止点，否则会显示为普通渐变。
渐变类型对比
线性渐变
适用于：导航菜单背景、按钮、页面标题栏
线性渐变示例
径向渐变
适用于：圆形按钮、聚光灯效果、背景焦点
径向渐变示例
圆锥渐变
适用于：色轮、饼图、进度指示器
圆锥渐变示例
渐变实时编辑器
调整下方选项，实时查看渐变效果：
渐变效果实时预览区域
/* 生成的CSS代码将显示在这里 */