background线性渐变–linear-gradient()

background线性渐变–linear-gradient()的完整攻略
background线性渐变（linear-gradient()）是CSS3中的一个功能强大的属性，它可以创建一个沿着一条直线的渐变效果。以下是关于background线性渐变的整攻略：

1. 基本语法
background线性渐变的基本语法如下：

background: linear-gradient(direction, color-stop1, color2, ...);

其中，direction表示渐变的方向，可以是角度、关键字（如to top、to bottom等）或是方向向量（如1, 0表示水平方向）。color-stop表示渐变的颜色和位置，可以是一个颜色或者是一个颜色值和一个位置值的组合。

2. 示例说明
以下是两个关于background线性渐变的示例说明：
示例1：水平渐变
假设我们要创建一个水渐变的背景，从左到右从红色渐到蓝色。以下是详细步骤
在CSS中设置背景为线性渐变，方向为水平：

background: linear-gradient(to right, red, blue);

在HTML中使用该CSS样式：

<div style="background: linear-gradient(to right, red, blue">Hello, world!</div>

这将在一个div元素中创建一个水平渐变的背景，从左到右从红色渐变到蓝色。

示例2：对角线渐变假设我们要创建一个对角线渐变的背景，从左上角到右下角红色渐变到蓝色。以下是详细步：
在CSS中设置背景为线性渐变，方向为从左上角到右下角：

background: linear-gradient(to bottom right, red, blue);

在HTML中使用该CSS样式：

<div style="background:-gradient(to bottom right, red, blue);">Hello, world!</div>

这将在一个div元素中创建一个对角线渐变的背景，从左上角到右下从红色渐变到蓝色。

3. 更多示例
以下是一些更多的`background线性渐变示例：
垂渐变

background: linear-gradient(to bottom, red, blue);

从左到右的渐变

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

从上到下的渐变

background: linear-gradient(to bottom, #1e90ff, #00bfff, #87cefa);

对角线渐变

background: linear-gradient bottom right, #ff1493, #1e90ff);