CSS中背景的Linear Gradients(线性渐变)应用

下面是关于CSS中背景的Linear Gradients(线性渐变)应用的完整攻略：

一、Linear Gradients的基本概念

线性渐变是CSS3的特性之一，用于控制元素的背景颜色，让颜色在元素背景上逐渐过渡，呈现出平滑的渐变效果。它基于渐变函数linear-gradient()，可以自定义颜色和方向。渐变函数的语法如下：

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

其中direction表示渐变的方向，可以用角度（如45deg）或方向代码（如to bottom）表示；color-stop1、color-stop2等是渐变的颜色点，可以是颜色或颜色和位置的组合。

二、Linear Gradients的方向

渐变的方向可以是角度值（如45deg）和关键字（如to bottom）两种表示方法。

2.1 用角度值表示渐变方向

渐变方向可以用0deg表示从上到下，90deg表示从左到右，依此类推。例如：

background: linear-gradient(45deg, red, blue);

渐变色从左上角到右下角沿着45度方向渐变。

2.2 用关键字表示渐变方向

关键字表示渐变方向，包括to top、to right、to bottom、to left等方向，用法如下：

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

以上代码表示从上到下沿渐变颜色为red到blue。

三、线性渐变的颜色点

线性渐变的颜色点是指渐变过程中固定位置的颜色值。可以只指定颜色值或同时指定颜色值和渐变开始的位置。可以指定多个颜色点，它们之间的颜色自动平滑过渡。

3.1 只指定颜色值

background: linear-gradient(red, blue);

从上到下，从红色淡入蓝色。

3.2 同时指定颜色值和位置

可以指定位置值， 例如在50%处指定一个颜色。

background: linear-gradient(red 50%, blue);

以上代码表示从上至下从红色开始，到50%的时候过渡到蓝色。

3.3 多个颜色点

线性渐变也可以指定多个颜色点，在两个颜色之间平滑过渡。 例如：

background: linear-gradient(red, yellow, green, blue);

从上至下逐渐从红色到黄色，从黄色到绿色，从绿色到蓝色。

四、示例说明

4.1 简单渐变

<div class="gradient-example"></div>

.gradient-example {
  width: 100px;
  height: 100px;
  background: linear-gradient(to bottom, #ff9900, #ff6600);
}

运行代码可得到从上到下渐变的橙色#ff9900到#ff6600。

4.2 半径为圆形的渐变

可以通过设定半径r为一个大于0的长度值，如100px等，产生半径为圆形的渐变，示例如下：

<div class="gradient-example-2"></div>

.gradient-example-2 {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30px 30px, #ff9900, #ff6600);
}

以上代码将产生一个黄色到橙色的半径为圆形的渐变，半径从(30px, 30px)开始。