CSS3新增的渐变背景，你了解多少？

我会带着你远行 2022-03-21 03:24 158阅读 0赞

CSS3为背景了线性渐变支持，这样就允许开发者进行更多灵活的背景设置。

# 1.使用line-gradient设置线性渐变 #

CSS3为线性渐变提供了line-gradient函数，linear-gradient() 用于创建一个线性渐变的 "图像"。语法格式如下所示：

line-gradient（方向？ 颜色列表）

上面语法中的方向用于指定线性渐变的方向，该方向可以省略。如果省略指定方向，线性渐变的方向默认是从上到下。方向参数支持如下属性。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>to top</td> 
   <td>代表从下到上。</td> 
  </tr> 
  <tr> 
   <td>to bottom</td> 
   <td>代表从上到下。（默认值）</td> 
  </tr> 
  <tr> 
   <td>to left</td> 
   <td>代表从左到右。</td> 
  </tr> 
  <tr> 
   <td>to right</td> 
   <td>代表从左到右。</td> 
  </tr> 
  <tr> 
   <td>to left top</td> 
   <td>代表从右下角到左上角。</td> 
  </tr> 
  <tr> 
   <td>to right top</td> 
   <td>代表从左下角到右上角。</td> 
  </tr> 
  <tr> 
   <td>to left bottom</td> 
   <td>代表从右下角到左下角。</td> 
  </tr> 
  <tr> 
   <td>to right bottom</td> 
   <td>代表从左上角到右下角。</td> 
  </tr> 
  <tr> 
   <td>Ndeg</td> 
   <td>指定角度值。其中0deg代表12点方向，该角度代表顺时针转过去的角度。</td> 
  </tr> 
 </tbody> 
</table>

下面代码示范了不同方向的线性渐变。

上面代码中定义的第一个div元素，通过background属性指定了线性渐变，没有为该线性渐变指定方向，因此默认是从上到下。linear-gradient()中的颜色只给出了red和blue两种颜色，意味着线性渐变的开始是红色，最后是蓝色，如下图所示。图片中还有8个按钮，分别就是渐变方向参数的8个属性。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70][]

除了使用简单的to top、to bottom等控制线性渐变方向之外，CSS3也允许通过角度来指定线性渐变的方向，如下面代码所示。

通过background属性指定线性渐变，并且为线性渐变指定了方向：0deg（从下到上的12点方向）。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 1][]

图片中定义了一个滑动条，它可以改变线性背景的方向（顺时针旋转），比如将角度设置为45°，那么线性渐变的方向就是从左下角到右上角，如下图所示。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 2][]

颜色列表最简单的形式就是红到蓝，分别表示线性渐变颜色的开始和结束，其实我们可以指定多种颜色，也可以指定多种颜色的位置（可以用百分比和长度值显示）。如果这些颜色指定了位置，那么线性渐变将会平均分布这些颜色，下面代码所示。

浏览器中的效果图如下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 3][]

# 2.使用repeating-linear-gradient设置循环线性渐变 #

repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像"。语法如下：

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

<table> 
 <thead> 
  <tr> 
   <th style="vertical-align:top;width:202px;">值</th> 
   <th style="vertical-align:top;width:647px;">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:202px;">angle&nbsp;</td> 
   <td style="vertical-align:top;width:647px;">定义渐变的角度方向。从 0deg 到 360deg，默认为 180deg。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:202px;">side-or-corner&nbsp;</td> 
   <td style="vertical-align:top;width:647px;">指定线性渐变的起始位置。由两个关键字组成：第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。 顺序是随意的，每个关键字都是可选的。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:202px;">color-stop1, color-stop2,...&nbsp;</td> 
   <td style="vertical-align:top;width:647px;">指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。</td> 
  </tr> 
 </tbody> 
</table>

循环线性渐变会利用给出的渐变颜色，从而形成更绚丽的背景，如下面代码所示。

repeating-linear-gradient设置的线性渐变会利用给出的red、blue、magenta这三种颜色来生成渐变背景。与普通线性渐变相同的是，循环线性渐变同样支持指定方向，指定方向的方式也一样。

# 3.使用radial-gradient设置径向渐变 #

CSS3还提供了radial-gradient函数设置径向渐变，radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。语法如下：

background: radial-gradient(形状? 大小? at x坐标 y坐标, 颜色列表);

<table> 
 <thead> 
  <tr> 
   <th style="vertical-align:top;">值</th> 
   <th style="vertical-align:top;">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;">形状</td> 
   <td style="vertical-align:top;"> <p>确定圆的类型:</p> <p>&nbsp; &nbsp; ● ellipse (默认): 指定椭圆形的径向渐变。</p> <p>&nbsp; &nbsp; ● circle ：指定圆形的径向渐变</p> </td> 
  </tr> 
  <tr> 
   <td colspan="1" style="vertical-align:top;">大小</td> 
   <td colspan="1" style="vertical-align:top;"> <p>定义渐变的大小，可能值：&nbsp;</p> <p>&nbsp; &nbsp; ● farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角</p> <p>&nbsp; &nbsp; ● closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边</p> <p>&nbsp; &nbsp; ● closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角</p> <p>&nbsp; &nbsp; ● farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边</p> </td> 
  </tr> 
  <tr> 
   <td colspan="1" style="vertical-align:top;">位置</td> 
   <td colspan="1" style="vertical-align:top;"> <p>定义渐变的位置。可能值：&nbsp;</p> <p>&nbsp; &nbsp; ● left：设置x坐标的最左边。</p> <p>&nbsp; &nbsp; ● right：设置x坐标的最右边。</p> <p>&nbsp; &nbsp; ● center（默认）：设置中间为径向渐变圆心的纵坐标值。</p> <p>&nbsp; &nbsp; ●&nbsp;top：设置顶部为径向渐变圆心的纵坐标值（y坐标）。</p> <p>&nbsp; &nbsp; ● bottom：设置底部为径向渐变圆心的纵坐标值（y坐标）。</p> </td> 
  </tr> 
  <tr> 
   <td colspan="1" style="vertical-align:top;">颜色列表</td> 
   <td colspan="1" style="vertical-align:top;">用于指定渐变的起止颜色。径向渐变的颜色列表和线性渐变的颜色列表完全一样。</td> 
  </tr> 
 </tbody> 
</table>

下面代码示范了通过位置改变径向渐变的圆心。

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 4][]

CSS3也允许使用数值（包括百分比和长度值）来指定径向渐变的圆心，下面代码所示。

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 5][]

下面代表示范了通过大小控制圆心的径向渐变的半径的方法。

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 6][]

CSS3也允许使用数值来指定径向渐变的大小，下面代码所示。

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 7][]

径向渐变既可以指定多种颜色又可以为各种颜色指定位置，如果为这些颜色指定位置，那么径向渐变将会平均分布这些颜色，如下面代码所示。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 径向渐变背景 </title>
    	<style type="text/css">
    	/* 为div元素增加边框 */
    	div{
    		height: 90px;
    		width: 300px;
    		border: 1px solid black;
    	}
    	</style>
    </head>
    <body style="font-size:14px;">
    background:radial-gradient(at 40px 90px, red, green, blue)<br>
    红绿蓝指定圆心的径向渐变
    <div style="background:radial-gradient(at 40px 100px, red, green, blue);"></div>
    background:radial-gradient(ellipse, red, green, blue)<br>
    红绿蓝指定形状的径向渐变
    <div style="background:radial-gradient(ellipse, red, green, blue);"></div>
    background:radial-gradient(20px, red, green, blue)<br>
    红绿蓝指定大小的径向渐变
    <div style="background:radial-gradient(20px, red, green, blue);"></div>
    background:radial-gradient(at 100px 50px, red, green, blue, yellow)<br>
    红绿蓝黄指定圆心的径向渐变
    <div style="background:radial-gradient(at 100px 50px, red, green, blue, yellow);"></div>
    background:radial-gradient(ellipse at 100px 50px, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1))
    <br>透明度改变指定形状、圆心的径向渐变
    <div style="background:radial-gradient(ellipse at 100px 50px, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1))"></div>
    background:radial-gradient(circle 50px, red 20%, green 40%, blue 70%)
    <br>红绿蓝指定形状、大小的径向渐变
    <div style="background:radial-gradient(circle 50px, red 20%, green 40%, blue 70%);"></div>
    background:radial-gradient(circle 50px at 150px 60px, red 20%, green 40%, blue 70%)
    <br>红绿蓝指定形状、大小、圆心的径向渐变
    <div style="background:radial-gradient(circle 50px at 150px 60px, red 20%, green 40%, blue 70%);"></div>
    background:radial-gradient(ellipse 100px 30px at 150px 60px, red 30%, green 40%, blue 60%, yellow 70%)
    <br>红绿蓝黄指定形状、大小、圆心的径向渐变
    <div style="background:radial-gradient(ellipse 100px 30px at 150px 60px, red 30%, green 40%, blue 60%, yellow 70%);"></div>
    </body>
    </html>

**效果图： **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 8][]

#  4.使用repeating-radial-gradient设置循环径向渐变 #

用重复的径向渐变创建图像。repeating-radial-gradient()的语法与radial-gradient()相同。下面代码示范了循环径向渐变的功能。

**效果图： **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 9][]

使用repeating-radial-gradient设置循环径向渐变，使用给出的blue、red、magenta三种颜色来生成渐变背景。

# 6.线性渐变和径向渐变的区别 #

简单来说，线性渐变是直线渐变，径向是圆形的渐变。

> 线性渐变：比如从左向右拖，它就会按照从左向右笔直进行渐变。
> 
> 径向渐变：从起点到终点颜色从内到外进行圆形渐变。

\------------如果大家喜欢[湮顾千古][Link 1]的博客，可以点击左上角的关注哦。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70]: /images/20220321/18d7ee14cca9465fb3a7f1de6c15b0c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 1]: /images/20220321/a39af1a2e5fb44699c137baa9efc5be5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 2]: /images/20220321/fb38fb9e8529445283fd8bbe7b36c1cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 3]: /images/20220321/f33d92b033aa4a5bab42d6ab9ac37009.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 4]: /images/20220321/bbd2890c6f1d4f84b55b21b8a87e0716.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 5]: /images/20220321/d87768d9df4a4a6dbb09aa9a6fc524c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 6]: /images/20220321/ef6cb91b8b8d42a59ac0b64378a533a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 7]: /images/20220321/03341c3b692c49f6ba11dad844b06e64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 8]: /images/20220321/002fa792757e43978c0624fe7c51952f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 9]: /images/20220321/7dd618829fdf4e5fa51784b324cb89ce.png
[Link 1]: https://blog.csdn.net/sujin_