【CSS】渐变背景详解：线性渐变（linear-gradient）和径向渐变（radial-gradient）

CSS 提供了两种常用的渐变类型——线性渐变（linear-gradient） 和 径向渐变（radial-gradient），其中线性渐变最为常用。

在这篇文章中，我们将深入探讨如何使用 CSS 渐变来为网页元素设置丰富的背景效果，掌握渐变的基本语法、应用场景及技巧。文中提供了多个示例样式，可以复制试试。

1. 线性渐变（linear-gradient）

基本语法

线性渐变是从一个方向到另一个方向逐渐改变颜色的效果。其基本语法如下：

background: linear-gradient([方向], [起始颜色], [中间颜色], [终止颜色]);

• 方向：指定渐变的方向，默认是从上到下（to bottom）。
• 颜色：可以有一个或多个颜色值，颜色的变化将按顺序进行，直到最终颜色。

1.1 方向

方向指定了渐变的起始和终止方向。可以使用度数（例如 90deg 或 180deg），也可以使用关键词（例如 to right、to left）。

常见方向设置

• 0deg 或 to top：从下到上（默认）
• 90deg 或 to right：从左到右
• 180deg 或 to bottom：从上到下
• 270deg 或 to left：从右到左

示例代码

/* 从上到下的线性渐变 */ 
background: linear-gradient(to bottom, #ff7e5f, #feb47b); 

/* 从左到右的线性渐变 */ 
background: linear-gradient(90deg, #ff7e5f, #feb47b);

1.2 颜色和透明度

渐变中的颜色可以是普通的颜色值，也可以使用透明度。透明度可以使用 rgba() 或 hsla() 表示，也可以直接使用 transparent。

• rgba()：用于定义颜色及其透明度，格式为 rgba(红色, 绿色, 蓝色, 透明度)，其中透明度的值为 0 到 1 之间。
• transparent：完全透明。

示例代码

/* 使用 rgba() 定义颜色 */ 
background: linear-gradient(90deg, rgba(255, 0, 0, 0.7), rgba(0, 0, 255, 0.3)); 

/* 使用 transparent 创建渐变的透明效果 */ 
background: linear-gradient(90deg, rgba(255, 0, 0, 0.7), transparent);

1.3 颜色停止点

线性渐变允许你定义多个颜色停止点。颜色停止点用于指定颜色在渐变过程中的位置。通过设置不同的颜色停止点，你可以更精确地控制颜色的过渡效果。

• 位置百分比：你可以指定颜色的停留位置，单位是百分比，或者是从 0 到 1 的浮动值。

示例代码

/* 颜色停止点：创建一个从左到右的渐变，红色从 0% 开始，黄色从 50% 开始，蓝色从 100% 开始 */ 
background: linear-gradient(90deg, red 0%, yellow 50%, blue 100%);

1.4 组合示例

/* 渐变背景应用 */ 
.newsletter-content { 
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7), transparent); 
}

在这个例子中，背景是一个从左到右的线性渐变，渐变的颜色从 rgba(0, 0, 0, 0.9)（深色）过渡到 rgba(0, 0, 0, 0.7)（稍亮的黑色），最后渐变为透明色（transparent）。

2. 径向渐变（radial-gradient）

径向渐变是从中心点向外扩展的渐变效果，它不像线性渐变那样有明确的方向，渐变是围绕某个点扩展的。

基本语法

background: radial-gradient([形状/大小], [起始颜色], [中间颜色], [终止颜色]);

• 形状：指定渐变的形状。可以是 circle（圆形）或 ellipse（椭圆形）。默认值是 ellipse。
• 大小：控制渐变的大小。常见值包括 closest-side、farthest-side、closest-corner、farthest-corner 等。
• 颜色：可以定义多个颜色的渐变过渡。

示例代码

/* 圆形渐变 */ 
background: radial-gradient(circle, #ff7e5f, #feb47b); 

/* 椭圆形渐变 */ 
background: radial-gradient(ellipse, #ff7e5f, #feb47b);

自定义形状和大小

/* 设置渐变的起始点为圆形，渐变到边缘 */ 
background: radial-gradient(circle closest-side, #ff7e5f, #feb47b);

2.1 透明度与渐变

径向渐变同样可以使用透明度和颜色停止点。可以通过 rgba() 来实现透明效果，或者使用 transparent 来创建渐变中的透明区域。

/* 使用透明度的径向渐变 */ 
background: radial-gradient(circle, rgba(255, 0, 0, 0.7), rgba(0, 0, 255, 0.3));

3. 渐变背景的常见应用场景

3.1 背景过渡效果

渐变背景常用于创建平滑的过渡效果，尤其是作为页面的背景。

/* 网页背景渐变 */ 
body { background: linear-gradient(45deg, #ff7e5f, #feb47b); }

3.2 按钮背景渐变

渐变也广泛应用于按钮和交互元素，可以提升视觉效果。

/* 渐变按钮 */ 
button { 
    background: linear-gradient(45deg, #ff7e5f, #feb47b); 
    padding: 10px 20px; 
    border: none; 
    color: white; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background 0.3s; 
} 

button:hover { 
    background: linear-gradient(45deg, #feb47b, #ff7e5f); 
}

3.3 渐变的遮罩效果

渐变也常用于遮罩层，可以通过 CSS 的 mask-image 属性创建渐变的遮罩效果，产生半透明的效果。

/* 渐变遮罩 */ 
.element { 
    background: url('image.jpg'); 
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

3.4 创建背景动画效果

渐变背景也可以与 CSS 动画结合使用，创建动态的背景效果。

/* 渐变动画 */ 
@keyframes gradientBackground {
    0% { background: linear-gradient(45deg, #ff7e5f, #feb47b); } 
    50% { background: linear-gradient(45deg, #feb47b, #ff7e5f); } 
    100% { background: linear-gradient(45deg, #ff7e5f, #feb47b); } 
} 

.element { 
    animation: gradientBackground 5s infinite; 
}

3.5 渐变进度条（效果如图）

.timeline-item {
	position: relative;
	padding-left: 6%;
	padding-bottom: 10px;
	width: 100%;
	min-height: 60px;
}

.timeline-item::before {
	content: '';
	position: absolute;
	left: 30px;
	top: 0;
	width: 10px;
	height: 100%;
	background: repeating-linear-gradient(-45deg,
			#FFC53D,
			#FFC53D 20px,
			#FFD87A 20px,
			#FFD87A 40px);
}

4. 总结

• 线性渐变（linear-gradient）：用于创建从一个方向到另一个方向的渐变效果，常用的方向包括 0deg（从上到下）和 90deg（从左到右），可以灵活指定多个颜色的过渡。
• 径向渐变（radial-gradient）：从中心向外扩展的渐变效果，适用于需要集中焦点的背景。
• 颜色与透明度：使用 rgba() 或 transparent 可以实现渐变中的透明效果，增强层次感。
• 渐变与透明度结合：可以通过 rgba() 设置透明度，或者直接使用 transparent 创建渐变效果中的透明区域。