5.1 线性渐变
渐变是网页设计中的强大工具，能够在不使用图片的情况下创建颜色之间的平滑过渡。CSS 提供两种主要类型的渐变：线性 (linear-gradient)
和径向 (radial-gradient)。这些渐变用于元素背景、创建按钮和其他视觉效果。
线性渐变 (linear-gradient)
线性渐变沿着特定线（轴）在两种或多种颜色之间创建平滑过渡。 线可以是水平的、垂直的或任意角度的。
语法
background: linear-gradient( direction, color-stop1, color-stop2, ...);
值
direction: 渐变的方向。可以用度数指定（例如，90deg），也可以使用关键词（例如，to right,to bottom left）color-stop: 颜色停止，定义颜色及其在渐变中的位置
使用示例
水平渐变:
CSS
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
HTML
<body>
<div class="linear-gradient-horizontal">水平渐变</div>
</body>
垂直渐变:
CSS
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
HTML
<body>
<div class="linear-gradient-vertical">垂直渐变</div>
</body>
对角渐变:
CSS
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
HTML
<body>
<div class="linear-gradient-diagonal">对角渐变</div>
</body>
多色渐变:
CSS
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
HTML
<body>
<div class="linear-gradient-multi">多色渐变</div>
</body>
代码解释:
to right: 渐变从左到右to bottom: 渐变从上到下45deg: 渐变以 45 度的角度进行red,yellow,green,blue: 多个颜色停点以创建多色渐变
5.2 径向渐变
radial-gradient 创建中心到圆或椭圆边缘的颜色平滑过渡。
径向渐变可以创建有趣的视觉效果，比如模拟三维效果。
语法:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
值:
shape: 渐变的形状，可以是circle(圆) 或ellipse(椭圆)（默认值）size: 渐变的大小，可以是closest-side,closest-corner,farthest-side,farthest-cornerposition: 渐变中心的位置，可以用百分比、像素指定或使用关键词（例如，center,topleft）color-stop: 颜色停止，定义颜色及其在渐变中的位置
使用示例
圆形渐变:
CSS
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
HTML
<body>
<div class="radial-gradient-circle">圆形渐变</div>
</body>
椭圆渐变:
CSS
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
HTML
<body>
<div class="radial-gradient-ellipse">椭圆渐变</div>
</body>
从中心渐变:
CSS
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
HTML
<body>
<div class="radial-gradient-at-center">从中心渐变</div>
</body>
从角渐变:
CSS
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
HTML
<body>
<div class="radial-gradient-at-corner">从角渐变</div>
</body>
代码解释:
circle: 创建圆形渐变ellipse: 创建椭圆渐变at center: 渐变从中心开始at top left: 渐变从左上角开始red,blue,green: 多个颜色停点以创建多色渐变
5.3 渐变的其他设置
重复渐变
1. 重复线性渐变 (repeating-linear-gradient)
重复线性渐变创建一个带有线性渐变的重复图案。
CSS
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. 重复径向渐变 (repeating-radial-gradient)
CSS
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. 透明颜色停点
颜色停点可以包含透明度以创建更复杂的视觉效果。
CSS
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. 使用多个渐变
可以使用多个渐变创建复杂的背景。
CSS
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION