linear-gradient()用于创建线性渐变背景，语法为background-image: linear-gradient(方向, 颜色停靠点)，支持多方向、多颜色及角度设置，结合height、background-size等属性可优化显示效果，现代浏览器兼容性良好。
在 CSS 中，linear-gradient() 是一种创建线性渐变背景的强大方式。它可以在两个或多个颜色之间平滑过渡，支持多种方向和颜色配置。
基本语法
使用 linear-gradient() 时，通常作为 background-image 的值：
-
direction：定义渐变的方向，比如
to bottom、to right、45deg等 -
color-stop：指定颜色及可选的位置，如
red、#ff0000 20%
常见用法示例
以下是几种常见的线性渐变写法：
- 从上到下的渐变（默认方向）：
background-image: linear-gradient(red, blue); - 从左到右的渐变：
background-image: linear-gradient(to right, red, blue); - 对角线渐变：
background-image: linear-gradient(to bottom right, yellow, green); - 使用角度（顺时针从 x 轴开始）：
background-image: linear-gradient(45deg, orange, white); - 多色渐变：
background-image: linear-gradient(red, yellow, green); - 带颜色停靠点位置：
background-image: linear-gradient(red 0%, yellow 50%, green 100%);
实际应用技巧
为了让渐变效果更实用，可以结合其他背景属性使用：
立即学习“前端免费学习笔记（深入）”；
- 确保容器有高度，否则可能看不到背景：
height: 200px; - 避免被内容覆盖，可设置：
background-size: cover; 或 background-repeat: no-repeat; - 兼容性考虑：现代浏览器都支持，无需额外前缀
基本上就这些。掌握 linear-gradient 后，你可以轻松实现丰富的背景视觉效果，无需图片资源。不复杂但容易忽略细节，比如方向写法和颜色分布控制。
