超级会员免费看
本文详细介绍了CSS线性渐变的各个方面，包括语法、各种方向（如从上到下、从左到右、对角线）、使用角度定制渐变方向、通过多个色标创建复杂渐变、利用透明度实现透明渐变效果，以及如何创建重复线性渐变。无论你是初学者还是寻求深化理解，这篇文章都是全面学习CSS渐变的宝贵资源。
CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。
CSS 定义了两种渐变类型：
- 线性渐变（向下/向上/向左/向右/对角线）
- 径向渐变（由其中心定义）
CSS 线性渐变
如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。
语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
线性渐变 - 从上到下（默认）
下面的例子显示了从顶部开始的线性渐变。它从红色开始，过渡到黄色：
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* 针对不支持渐变的浏览器 */
background-image: linear-gradient(red, ye
订阅专栏 解锁全文
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
