<gradient>
==========

**`<gradient>`** CSS 数据类型 是 `<image>` 的一种特殊类型，包含两种或多种颜色的过渡转变。

尝试一下
----

CSS 渐变没有内在尺寸，也就是说，它没有固有或首选的尺寸，也没有首选的比例，其实际大小取决于所应用的元素的大小。

语法
--

`<gradient>` 数据类型是由下面列出的函数类型中的一个定义的。

### 线性渐变

线性渐变会在一个假想的直线上过渡颜色。线性渐变是由 `linear-gradient()` 函数产生的。

### 径向渐变

径向渐变从一个中间点（原点）开始过渡颜色。径向渐变是由 `radial-gradient()` 函数产生的。

### 重复渐变

重复渐变可根据需要复制渐变，以填充指定区域。重复渐变是使用 `repeating-linear-gradient()` 和 `repeating-radial-gradient()` 函数生成的。

### 锥形渐变

锥形渐变会沿着一个圆过渡颜色。锥形渐变是由 `conic-gradient()` 函数产生的。

插值
--

就像很多包含颜色的插值一样，渐变是在 alpha 预乘的颜色空间中插值的。这会避免在颜色和不透明度都在改变时出现未预料的灰色阴影。（注意旧的浏览器可能在使用 transparent 关键字 时不使用此行为。）

形式语法
----
```

<gradient> =   
  <linear-gradient()>            |  
  <repeating-linear-gradient()>  |  
  <radial-gradient()>            |  
  <repeating-radial-gradient()>    
  
<linear-gradient()> =   
  linear-gradient( [ <linear-gradient-syntax> ] )    
  
<repeating-linear-gradient()> =   
  repeating-linear-gradient( [ <linear-gradient-syntax> ] )    
  
<radial-gradient()> =   
  radial-gradient( [ <radial-gradient-syntax> ] )    
  
<repeating-radial-gradient()> =   
  repeating-radial-gradient( [ <radial-gradient-syntax> ] )    
  
<linear-gradient-syntax> =   
  [ <angle> | to <side-or-corner> ]? , <color-stop-list>    
  
<radial-gradient-syntax> =   
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>    
  
<side-or-corner> =   
  [ left | right ]  ||  
  [ top | bottom ]    
  
<color-stop-list> =   
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#    
  
<radial-shape> =   
  circle   |  
  ellipse    
  
<radial-size> =   
  <radial-extent>               |  
  <length [0,∞]>                |  
  <length-percentage [0,∞]>{2}    
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<linear-color-stop> =   
  <color> <length-percentage>?    
  
<linear-color-hint> =   
  <length-percentage>    
  
<radial-extent> =   
  closest-corner   |  
  closest-side     |  
  farthest-corner  |  
  farthest-side      
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--

### 线性渐变示例

简单的线性渐变示例。
```

<div class="linear-gradient">线性渐变</div>
```


```
div {
  width: 240px;
  height: 80px;
}
```



```css
.linear-gradient {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}
```

### 径向渐变示例

简单的径向渐变。
```

<div class="radial-gradient">径向渐变</div>
```


```
div {
  width: 240px;
  height: 80px;
}
```



```css
.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
```

### 重复渐变示例

简单的重复线性和径向渐变示例。
```

<div class="linear-repeat">重复的线性渐变</div>
<br />
<div class="radial-repeat">重复的径向渐变</div>
```


```
div {
  width: 240px;
  height: 80px;
}
```



```css
.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    lightpink,
    lightpink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    powderblue,
    powderblue 8px,
    white 8px,
    white 16px
  );
}
```

### 锥形渐变示例

简单的锥形渐变示例。注意这目前并非在浏览器中广泛支持。
```

<div class="conic-gradient">锥形渐变</div>
```


```
div {
  width: 200px;
  height: 200px;
}
```



```css
.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}
```

规范
--

| Specification |
| --- |
| CSS Images Module Level 4 # gradients |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 CSS 渐变
* 渐变函数：`linear-gradient()`、`repeating-linear-gradient()`、`radial-gradient()`、`repeating-radial-gradient()`、`conic-gradient()`、`repeating-conic-gradient()` (en-US)
* CSS 基本数据类型
* CSS 单位和值
* CSS 介绍：值和单位