在CSS中,你可以使用`linear-gradient()`或`radial-gradient()`函数来创建渐变背景色。以下是一些基本的使用方法:
线性渐变
线性渐变是通过在两个或多个颜色之间创建一个平稳的过渡来实现的。你可以指定渐变的方向和颜色的起始和结束位置。
基本语法:
```css
background: linear-gradient(direction, color-stop1, color-stop2, ...);
```
`direction`:渐变的方向,可以是以下值之一:
`to top`:从下到上
`to bottom`:从上到下
`to left`:从右到左
`to right`:从左到右
`to top left`:斜向上从右到左
`to top right`:斜向上从左到右
`to bottom left`:斜向下从右到左
`to bottom right`:斜向下从左到右
`color-stop1`、`color-stop2`等:颜色值,可以用逗号分隔多个颜色,表示从第一个颜色渐变到最后一个颜色。
示例:
```css
/* 从左上到右下渐变 */
background: linear-gradient(45deg, ff0000, 0000ff);
/* 从下到上,从蓝色开始渐变,到高度40%位置是绿色渐变开始,最后以红色结束 */
background: linear-gradient(to bottom, blue, green 40%, red);
```
径向渐变
径向渐变是通过从一个点向四周扩散颜色来实现的。你可以指定渐变的起始位置、形状、大小和颜色的起始和结束位置。
基本语法:
```css
background: radial-gradient(shape size at position, start-color, ..., last-color);
```
`shape`:渐变的形状,可以是以下值之一:
`circle`:圆形
`ellipse`:椭圆形
`size`:关于径向渐变的大小,可以是以下值之一:
`closest-side`:最近边
`farthest-side`:最远边
`closest-corner`:最近角
`farthest-corner`:最远角
`position`:渐变的起始位置,可以是百分比或具体坐标。
示例:
```css
/* 从内到外径向渐变 */
background: radial-gradient(circle, ff0000, 0000ff);
/* 从左上角向四周径向渐变 */
background: radial-gradient(at top left, ff0000, 0000ff);
```
综合示例
```html
Linear Gradient
Radial Gradient