8.1 线性渐变 (linear-gradient)
CSS中的渐变可以实现两个及以上颜色之间的平滑过渡。它们用于背景、按钮等元素，增加视觉深度和吸引力。在CSS中，主要有两种渐变：线性渐变 (linear-gradient) 和径向渐变 (radial-gradient)。
线性渐变 会沿着一条直线在颜色间平滑过渡。你可以精确调整线的方向和颜色过渡。
语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
其中:
direction: 渐变方向。可以是角度（例如45deg）或关键字（to right,to bottom等）color-stop: 定义渐变中颜色及其位置
示例 1: 简单线性渐变
这个例子中，渐变从右到左由红色到蓝色：
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, red, blue);
}
示例 2: 具有角度的线性渐变
这个例子中，渐变以45度角从黄色变为绿色：
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(45deg, yellow, green);
}
示例 3: 多色线性渐变
这个例子中，渐变从上到下，平滑地过渡四种颜色：红、黄、绿和蓝：
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to bottom, red, yellow, green, blue);
}
示例 4: 带有控制点的线性渐变
这个例子中指定了控制点，精确定义了每种颜色在渐变中的位置：
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}
8.2 径向渐变 (radial-gradient)
径向渐变 从中心或指定点开始，颜色之间平滑过渡。渐变扩展为一个圆或椭圆。
语法：
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
其中:
shape: 渐变的形状 (circle或ellipse)size: 渐变的大小 (closest-side,farthest-side,closest-corner,farthest-corner)position: 渐变中心的位置（可以用像素、百分比或关键字，如center,top,left等来指定）color-stop: 定义渐变中颜色及其位置
示例 1: 简单径向渐变
这个例子中，径向渐变从圆心开始，由红色过渡到蓝色：
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle, red, blue);
}
示例 2: 不同位置的径向渐变
这个例子中，径向渐变的中心偏移到了左上方，从黄色过渡到绿色：
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle at top left, yellow, green);
}
示例 3: 多色径向渐变
这个例子中，渐变从圆心开始，平滑地过渡四种颜色：红、黄、绿和蓝：
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle, red, yellow, green, blue);
}
示例 4: 带有控制点的径向渐变
这个例子中指定了控制点，精确定义了每种颜色在渐变中的位置：
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle at center, red 0%, yellow 25%, green 50%, blue 100%);
}
8.3 复杂渐变示例
示例 1: 具有半透明效果的线性渐变
这个例子使用半透明效果创建了从半透明红色到半透明蓝色的渐变：
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
}
示例 2: 具有尺寸的径向渐变
这个例子中创建了一个椭圆形径向渐变，填满元素的最接近的边：
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(ellipse closest-side, red, blue);
}
示例 3: 为按钮创建渐变
渐变可以使按钮更具吸引力。这个渐变从上到下，从浅绿过渡到深绿，增加了按钮的立体感和深度：
<button type="button" class="button">Button</button>
.button {
background: linear-gradient(to bottom, #4caf50, #2e7d32);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
}
使用渐变的优势：
1. 视觉吸引力。 渐变能在颜色之间创建平滑过渡，增加设计元素的视觉深度和吸引力。
2. 灵活性。 渐变可以自定义以创建多种效果，从简单过渡到复杂的多色背景。
3. 响应式设计支持。 渐变可以轻松适应不同的屏幕大小和分辨率，使其在创建响应式网页设计时非常有用。
GO TO FULL VERSION