介绍

是一种<image>CSS 数据类型的子类型，用于表现两种或多种颜色的过渡转变。<gradient> 没有内在尺寸；即，不具备固有或首选的尺寸，也不具备首选的比率。其实际的大小取决于其填充元素的大小。

线性渐变 `linear-gradient()`

颜色值沿着一条隐式的直线逐渐过渡。

线性渐变的构成：

线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点，如图：

渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。

语法：

linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops

where <side-or-corner> = [ left | right ] || [ top | bottom ]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
  and <color-hint> = [ <percentage> | <length> ]

示例1:

当颜色中间点的位置被隐式定义，它被放置在位于它之前的点和位于它之后的点之间的中间位置处。

linear-gradient(red, green, yellow);

效果：

示例2：

利用<length>或<presentage>者数据类型可以显示定义一个位置。

linear-gradient(red 0%, orange 30%, yellow 50%, green 80%, blue 100%);

效果：

注意：
如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。

颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于前面颜色的终止点则后面的会被覆盖，从而创建一个硬转换。

示例3：

允许颜色多个颜色终止位置。通过在 CSS 声明中包含两个位置，可以将一个颜色声明为两个相邻的颜色终止。

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

效果：

示例4：45deg 渐变

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

效果：

示例5：to right top渐变并从60%梯度线进行渐变

background-image: linear-gradient(135deg, red, red 60%, blue);

效果：

示例6：渐变加上透明度

background-image: linear-gradient(to bottom right, red, rgba(0,0,0,0));

效果：

示例7：浏览器兼容问题

.grad {
  不支持渐变的浏览器回退方案 
  background-color: #F07575;  

  支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); 

  支持 Firefox (3.6 to 15) 
  background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); 

  支持旧 Opera (11.1 to 12.0) 
  background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55);  

  标准语法; 需要最新版本
  background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); 
}

-moz- 前缀的规则用于兼容 Fx 3.6 to Fx 15 的火狐浏览器。
`-webkit- 前缀的规则用于兼容在 Android 4.3 以前版本、iOS 6.1 以前版本、Safari 6。
当使用带前缀的规则时，不要加“to”关键字。

注意：如果将<body>标签的 background-image 属性设置为线性渐变linear-gradient，除非您还设置文档根标签（例如<html>标签）的min-height属性，否则渐变不会填充浏览器屏幕到 100％。

径向渐变 `radial-gradient()`

颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。

径向渐变的组成：

径向渐变由其 中心点、边缘形状轮廓、两个或多个色值结束点 定义而成。

为了创建平滑的渐变，径向渐变函数绘制了一系列从中心点放射到边缘形状（甚至可能超出范围）的同心轮廓。边缘形状可以是圆形（circle）或椭圆形（ellipse）。

色值结束点位于虚拟渐变射线（Virtual gradient ray）上，该渐变射线从中心点水平向右延伸。基于百分比的色值结束位置是相对于边缘形状和此渐变射线之间的交点（代表 100％）。每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。

语法：

<radial-gradient()> = 
  radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )  

<size> = 
  <extent-keyword>              |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | start | end | <length-percentage> ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ]  |
  [ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#  

<extent-keyword> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

<linear-color-stop> = 
  <color>               &&
  <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>

示例1：简单的渐变

background-image: radial-gradient(red, yellow 20%, green);

效果：

示例2：非居中渐变

background-image: radial-gradient(farthest-corner at 20px 50px, #f35 0%, #43e 100%);

效果：

锥形渐变 `conic-gradient()`

创建了一个由渐变组成的图像，渐变的颜色变换围绕一个中心点旋转（而不是从中心辐射）。

语法：

<conic-gradient()> = 
  conic-gradient( [ [ from <angle> ]? [ at <position> ]? ]  ||
  <color-interpolation-method> , <angular-color-stop-list> )  

<position> = 
  [ left | center | right | top | bottom | start | end | <length-percentage> ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ]  |
  [ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ]  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<angular-color-stop-list> = 
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#  

<length-percentage> = 
  <length>      |
  <percentage>  

<rectangular-color-space> = 
  srgb         |
  srgb-linear  |
  lab          |
  oklab        |
  xyz          |
  xyz-d50      |
  xyz-d65      

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing | specified ] hue  

<angular-color-stop> = 
  <color>              &&
  <color-stop-angle>?  

<angular-color-hint> = 
  <angle-percentage>  

<color-stop-angle> = 
  <angle-percentage>{1,2}  

<angle-percentage> = 
  <angle>       |
  <percentage>

锥形渐变的合成描述：

锥形渐变语法与径向渐变语法类似，但 颜色断点放置在渐变圆弧（圆的周长）周围 ，而不是从渐变中心出现的渐变线上。使用锥形渐变时，颜色会围绕圆心旋转，从顶部开始顺时针旋转。

锥形渐变是通过 指示旋转角度、渐变中心、指定颜色断点列表 来指定的。

与线性渐变和径向渐变不同，线性渐变和径向渐变的颜色断点是通过指定 length来放置的，而锥形渐变的颜色断点是通过 angle 来指定的。单位包括度的 deg、梯度的 grad、弧度的 rad和圈的 turn。在一个圆中有 360 度，400 个梯度，2π 弧度，1 圈。支持锥形渐变的浏览器也接受百分比值，100% 等于 360 度，但这不在规范中。

与径向渐变类似，锥形渐变语法用于将渐变中心定位在图像内部甚至外部的任何位置。位置的值类似于两个值的 background-position 语法。

渐变的弧度是渐变的周长。渐变或弧度的 start point 方向是北，或 12:00pm方向。然后通过 from 角度来旋转。渐变的颜色由倾斜的颜色断点、它们的起点、终点，以及介于两者之间的可选的倾斜的颜色断点决定。颜色之间的过渡可以通过相邻颜色的颜色断点之间的颜色提示来改变。

示例1：40度渐变

background-image: conic-gradient(from 40deg, white , black);

效果：

示例2：偏移中心的渐变

background-image: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);

效果：

示例3：渐变饼图

background-image: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
border-radius: 50%;

效果：

使用多位置颜色断点，相邻颜色具有相同的颜色断点值，从而创建出条纹效果。

示例4：棋盘格

background-image: conic-gradient(white 0.25turn, black 0.25turn 0.5turn, white 0.5turn 0.75turn, black 0.75turn);
background-size: 25% 25%;
background-repeat: repeat;

等价
background: conic-gradient(white 0.25turn, black 0.25turn 0.5turn, white 0.5turn 0.75turn, black 0.75turn) top left / 25% 25% repeat;

效果：

重复渐变

重复多次渐变图案直到足够填满指定元素。

重复线性渐变 `repeating-linear-gradient()`

创建一个由重复线性渐变组成的<image>，这是一个类似 linear-gradient 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器。这个函数的结果是一个<gradient>数据类型的对象，这是一个特殊的<image>类型。

每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

语法：

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                            \---------------------------------/ \----------------------------/
                              渐变轴的定义                                色标列表

where <side-or-corner> = [left | right] || [top | bottom]
   and <color-stop>     = <color> [ <percentage> | <length> ]?

示例1：

background-image:repeating-linear-gradient(45deg, red, green 10%);
background-image:repeating-linear-gradient(45deg, white 0px 10px, black 10px 20px);

效果：

重复径向渐变 `repeating-radial-gradient()`

它类似于radial-gradient 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是 <gradient>数据类型的对象，是一种特殊的<image>类型。

语法：

repeating-radial-gradient(
       [[ circle  || <length> ]                     [at <position>]? , |
        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
                                                     at <position>   ,    <color-stop> [ , <color-stop> ]+ )
        \---------------------------------------------------------------/\--------------------------------/
                  定义轮廓、尺寸和结束形状的位置                                    色标列表

where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
  and <color-stop> = <color> [ <percentage> | <length> ]?

<extent-keyword>
关键字用于描述边缘轮廓的具体位置。以下为关键字常量：

Keyword	Description
`closest-side`	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
`closest-corner`	渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
`farthest-side`	与 closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
`farthest-corner`	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

备注：早期的草案中还包含其他关键字 (cover and contain) ，分别相当于标准关键字 farthest-corner 和 closest-side,。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

示例1：

background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

background: -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
background: -ms-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
background: -o-repeating-radial-gradient(black, black 5px, white 5px, white 10px);

效果：

示例2：

background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);

效果：

重复锥形渐变 `repeating-conic-gradient()

示例：

background-image: repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);

效果：

CSS 数据类型 - <gradient>

CSS 数据类型 - <gradient>

介绍

线性渐变 `linear-gradient()`

线性渐变的构成：

语法：

示例1:

示例2：

示例3：

示例4：45deg 渐变

示例5：`to right top`渐变并从60%梯度线进行渐变

示例6：渐变加上透明度

示例7：浏览器兼容问题

径向渐变 `radial-gradient()`

径向渐变的组成：

语法：

示例1：简单的渐变

示例2：非居中渐变

锥形渐变 `conic-gradient()`

语法：

锥形渐变的合成描述：

示例1：40度渐变

示例2：偏移中心的渐变

示例3：渐变饼图

示例4：棋盘格

重复渐变

重复线性渐变 `repeating-linear-gradient()`

语法：

示例1：

重复径向渐变 `repeating-radial-gradient()`

语法：

示例1：

示例2：

重复锥形渐变 `repeating-conic-gradient()

相关阅读更多精彩内容

友情链接更多精彩内容

CSS 数据类型 - <gradient>

介绍

线性渐变 linear-gradient()

线性渐变的构成：

语法：

示例1:

示例2：

示例3：

示例4：45deg 渐变

示例5：to right top渐变 并从60%梯度线进行渐变

示例6：渐变加上透明度

示例7：浏览器兼容问题

径向渐变 radial-gradient()

径向渐变的组成：

语法：

示例1：简单的渐变

示例2：非居中渐变

锥形渐变 conic-gradient()

语法：

锥形渐变的合成描述：

示例1：40度渐变

示例2：偏移中心的渐变

示例3：渐变饼图

示例4：棋盘格

重复渐变

重复线性渐变 repeating-linear-gradient()

语法：

示例1：

重复径向渐变 repeating-radial-gradient()

语法：

示例1：

示例2：

重复锥形渐变 `repeating-conic-gradient()

相关阅读更多精彩内容

友情链接更多精彩内容

线性渐变 `linear-gradient()`

示例5：`to right top`渐变并从60%梯度线进行渐变

径向渐变 `radial-gradient()`

锥形渐变 `conic-gradient()`

重复线性渐变 `repeating-linear-gradient()`

重复径向渐变 `repeating-radial-gradient()`