引导者CSS 背景渐变
简介
CSS 背景渐变是一种应用于网页元素背景的视觉效果，它可以将两种或多种颜色平滑过渡，从而创建美观且引人注目的设计。
多级标题
线性渐变
径向渐变
角度渐变
内容详细说明
线性渐变
线性渐变在两个指定点之间创建平滑的色彩过渡。语法如下：```css background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ```
direction：
渐变的方向，可以是 `to top`, `to bottom`, `to left`, `to right` 或角度（例如 `45deg`）
color-stop：
渐变中的颜色及其位置，可以是百分比或 `px` 值
径向渐变
径向渐变从一个中心点向外扩散颜色。语法如下：```css background-image: radial-gradient(shape size, start-color, end-color); ```
shape size：
渐变的形状和大小，可以是 `circle`, `ellipse` 或 `closest-side`
start-color：
渐变的起始颜色
end-color：
渐变的结束颜色
角度渐变
角度渐变类似于线性渐变，但它按照指定角度创建过渡。语法如下：```css background-image: repeating-linear-gradient(angle, color-stop1, color-stop2, ...); ```
angle：
渐变的角度
color-stop：
与线性渐变相同
示例
以下是一些 CSS 背景渐变的示例：
水平蓝色到绿色的线性渐变：
```css background-image: linear-gradient(to right, blue, green); ```
从中心扩散的红色到黄色的径向渐变：
```css background-image: radial-gradient(circle, red, yellow); ```
45 度角的紫色到橙色的角度渐变：
```css background-image: repeating-linear-gradient(45deg, purple, orange); ```
浏览器兼容性
CSS 背景渐变在所有现代浏览器中都得到支持。但是，对于较旧的浏览器，可能需要使用供应商前缀：
-webkit-gradient：
WebKit 浏览器（Safari、Chrome）
-moz-linear-gradient：
Mozilla 浏览器（Firefox）
-o-linear-gradient：
Opera 浏览器
