• CSS3 Gradients
• 再说CSS3渐变——线性渐变
• 再说CSS3渐变——径向渐变

一直以来，我们只能使用图形设计软件来实现Web页面中的渐变效果；现在W3C组织将渐变设计收入到CSS3标准中，可以让我们显示两种或多种指定颜色的平滑过渡，使用CSS3渐变后可以减少图片下载所耗费的时间和流量；另外，使用渐变的元素在缩放时会有更好的视觉效果，因为渐变是由浏览器生成的。

最早支持CSS3渐变的是基于Webkit内核的浏览器，随后在Firefox和Opera等浏览器都得到支持，但是众浏览器之间没有统一的标准，用法差异很大。不同的渲染引擎实现渐变的语法也不同，在各浏览器下使用都需要带上自己的前缀，给前端设计师们带来极大的不便。

现在，各大浏览器最新版本已经完全支持W3C的标准语法（见下面的“浏览器兼容情况”部分）。

CSS3定义了以下两种渐变：

• 线性渐变
• 径向渐变

浏览器兼容情况

CSS3 线性渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。

CSS3制作渐变效果，其实和使用制作软件中的渐变工具没有什么差别。首先需要指定一个渐变的方向、渐变的起始颜色、渐变的结束颜色。具有这三个参数就可以制作一个最简单、最普通的渐变效果。如果你需要制作一个复杂的多色渐变效果，就需要在同一个渐变方向增添多个色标。具备这些渐变参数（至少三个），各浏览器就会绘制与渐变线垂直的颜色结来填充整个容器。浏览器渲染出来的效果就类似于制作软件设计出来的渐变图像，从一种颜色到另一种颜色的平滑淡出，沿所指的线性渐变方向实现颜色渐变效果。

语法与参数

W3C组织于2012年04月发布了CSS3线性渐变的CR版本（候选人推荐版本）。这一次发布的CSS3渐变属性有着很大的变化，使用语法较前面的版本要简单多，容易理解的多。最让大家感到高兴的是，现在所有现代浏览器都支持W3C的标准语法，包括曾经令人讨厌的IE浏览器，也在IE10中支持了标准语法。

1

linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)

W3C标准线性渐变语法包括三个主要参数：第一个参数指定了渐变的方向，同时决定了渐变颜色的停止位置。这个参数值可以省略，当省略不写的时候其取值为“to bottom”（即默认为自上向下）；第二个和第三个参数，表示颜色的起始点和结束点。

其实上面语法中的 <color-stop> 类似于PS等图形设计软件中渐变的色标块，可以添加多个值（至少2个），当该颜色参数多于2个时则形成多色渐变。

关于渐变方向参数，有两种方法来指定：

• <angle>：通过角度来表示渐变方向，0度表示从下向上；正数表示逆时针方向，负数表示顺时间方向；如90度是自左向右，-90度表示自右向左。
• 关键词：通过关键词表示渐变的方向，比如“to top”、“to right”、“to bottom”和“to left”，这些关键词分别对应的角度值为“0deg”、“90deg”、“180deg”和“270deg”。另外，还可以使用“to top left”右下角到左上角、“to top right”左下角到右上角等，根据关键词语义很容易理解其方向。

双色渐变示例

以下渐变示例均是由黄色向红色的双色渐变

不写方向（自上向下）

方向：to left（自右向左）

方向：to top left（自右下角向左上角）

方向：0度（自下向上）

方向：90度（顺时针90度，变成自左向右）

方向：-90度（逆时针90度，变成自右向左）

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.linear-demo {
    height: 60px;
    width: 50%;
    padding: 8px;
}
.linear-demo-1 {
    background: linear-gradient(yellow, red)
}
.linear-demo-2 {
    background: linear-gradient(to left, yellow, red)
}
.linear-demo-3 {
    background: linear-gradient(to top left, yellow, red)
}
.linear-demo-4 {
    background: linear-gradient(0deg, yellow, red)
}
.linear-demo-5 {
    background: linear-gradient(90deg, yellow, red)
}
.linear-demo-6 {
    background: linear-gradient(-90deg, yellow, red)
}

多色渐变示例

多色渐变与双色渐变唯一的区别就是多加几个颜色参数，如下所示：

1
2
3
4
5
6

.linear-demo-7 {
    background: linear-gradient(to top, yellow, red, green, orange)
}
.linear-demo-8 {
    background: linear-gradient(-90deg, indigo, red, yellow, orange)
}

自下向上：yellow, red, green, orange

-90度：indigo, red, yellow, orange

<color-stop>（色标）位置比例

前面的示例中 color-stop 都只指定了颜色，这样不管是双色渐变还是多色渐变，所有渐变色在渐变方向都是均分元素尺寸的；其实每个 color-stop（色标） 的颜色后面还可以带一个0~100%之间的百分数，用于指定色标在渐变方向上的位置比例，其用法与Photoshop中的值线渐变工具用法相似。

看下面这个示例：

1
2
3
4

.linear-demo-9 {
    width: 100%;
    background: linear-gradient(to left, indigo, red 10%, yellow 50%, orange);
}

自右向左：indigo, red 10%, yellow 50%, orange

上面这个例子渐变色从右至左分别是紫蓝色、红色、黄色和橙色，其中红色指定位于元素10%处，黄色位于水平中点（50%）处；紫蓝色和橙色没有指定位置，分别表示起点（0）和终点（100%）；其余部分都用渐变色填充。

径向渐变

CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。径向渐变相对线性渐变来说要复杂一些。

语法与参数

与线性渐变类似，虽然众多浏览器早就支持了CSS3径向渐变，但语法各不相同；在2013年04年，W3C为CSS3径向渐变推出最新的标准语法格式，这里只考虑标准语法。

1

radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);

<position>：主要用来定义径向渐变的圆心位置

类似于CSS中 background-position 属性，默认值为 center 。其值主要有以下几种：

• <length>：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
• <percentage>：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
• left：设置左边为径向渐变圆心的横坐标值。
• center：设置中间为径向渐变圆心的横坐标值或纵坐标。
• right：设置右边为径向渐变圆心的横坐标值。
• top：设置顶部为径向渐变圆心的纵标值。
• bottom：设置底部为径向渐变圆心的纵标值。

<shape>：主要用来定义径向渐变的形状

其主要包括两个值 circle 和 ellipse ，默认值是 ellipse ：

• circle：如果 <size> 和 <length> 大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变
• ellipse：默认值，如果 <size> 和 <length> 大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。

<size>：主要用来确定径向渐变的结束形状大小

默认值为 farthest-corner 。可以显式的设置一些关键词主要有：

• closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
• closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
• farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
• farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

如果 <shape> 设置了为 circle 或者省略，<size> 可能显式设置为 <length>。表示的是用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆。此值不不能负值。

如果 <shape> 设置了 ellipse 或者省略，<size> 可能显式设置为 [<length>|<percentage>]。主要用来设置椭圆的大小。第一个值代表椭圆的水平半径，第二个值代表垂直半径。这两个值除了使用 <length> 定义大小之外还可以使用 <percentage> 来定义这两半径大小。使用 <percentage> 定义值是相对于径向渐变容器的尺寸。同样不能为负值。

<color-stop>：径向渐变线上的停止颜色

类似于线性渐变的 <color-stop>。径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点，100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。

Radial Gradient - Evenly Spaced Color Stops (this is default)，即默认所有渐变色平均分配元素尺寸。

径向渐变示例

虽然径向渐变要比线性渐变更为复杂，但只要了解其基本语法以及相关属性参数的作用，适应起来也并不是特别难。下面通过一些示例来理解径向渐变的语法及相关属性参数，所有例子都在一个宽为360像素，高为200像素的容器中实现。

1
2
3
4
5

.radial-box {
    width: 360px;
    height: 200px;
    border: 5px solid hsla(60,50%,80%,.8);
}

先看一个最简单的径向渐变，圆心在容器正中心，除了颜色外其他均为默认值：

1
2
3

.raidal-demo-00 {
    background: radial-gradient(hsla(120, 70%, 60%, .9), hsla(360, 60%, 60%, .9))
}

可以看出上面的示例是一个椭圆形的径向渐变，如果想制作一个圆形渐变，而不是一个椭圆形渐变，只需要添加一个关键词 circle：

1
2
3

.raidal-demo-01 {
    background: radial-gradient(circle, hsla(120, 70%, 60%, 0.9), hsla(360, 60%, 60%, 0.9))
}

从上面的两个示例可以看出，圆形渐变是一种特殊的椭圆渐变，其水平半径和垂直半径具有相同的长度值：

既然圆形渐变是椭圆渐变的一种特殊情况，那渐变主要半径（水平半径）和次要半径（垂直半径）不相同时就是一个椭圆形渐变：

在制作椭圆形渐变时，可以使用关键词 ellipse 。

除了使用关键词制作不同的径向渐变，还可以用不同的渐变参数制作径向渐变效果，通过制作同心圆，主要半径和次要半径来决定径向渐变的形状。例如，圆心位置都在“180px,100px”处（容器中心），主要半径为50px，次要半径为120px的径向渐变：

1
2
3

.raidal-demo-02 {
    background: radial-gradient(50px 120px at 180px 100px, hsla(120, 70%, 60%, 0.9), hsla(360, 60%, 60%, 0.9))
}

<position> 和 <size> 参数除了使用 <length>（具体像素值），还可以使用 <percentage>（百分比） ，示例：

1
2
3

.raidal-demo-03 {
    background: radial-gradient(80% 20% at 30% 60%, hsla(120, 70%, 60%, 0.9), hsla(360, 60%, 60%, 0.9))
}

• 使用 <percentage> 定义的值是相对于径向渐变容器的尺寸，不能为负值
• <length>（具体像素值） 和 <percentage>（百分比） 也可混合使用，如 80% 20px at 30px 60%

除了上述方法能实现一些简的径向渐变效果之外，还可以使用渐变形状配合圆心定位。主要使用“at”加上关键词来定义径向渐变中心位置。径向渐变中心位置类似于 background-position 属性，可以使用一些关键词来定义：

1
2
3

.raidal-demo-04 {
    background: radial-gradient(circle at right, hsla(120, 70%, 60%, 0.9), hsla(360, 60%, 60%, 0.9))
}

这里可以使用的位置关键词包括 center、top、right、bottom 和 left，以及它们的组合 top left、top right、bottom left 和 bottom right 等，top left 也可以写作 left top，其它组合亦然。

用来设置元素径向渐变圆心的所有可用关键词对照的位置关系，可以浏览下图：

前面主要说的是使用 <size> 、渐变类型关键词以及渐变类型配合关键词制作的径向渐变效果。除了上述方法可以制作一些径向渐变效果之外，还可以使用 <size> 、渐变类型以及圆心关键词结合制作一些径向渐变效果。

当给元素显式的设置了径向渐变的大小，这两个值设置了径向渐变的水平和垂直半径。如果一个径向渐变包含径向渐变类型“circle”和一个单一的大小值，您就可以实现一个圆形的径向渐变。如果一个径向渐变包含了径向渐变类型“ellipse”和两个值，或者只是两个值，您就可以实现一个椭圆形的径向渐变。在设置径向半径大小值时，可以使用任何CSS的单位长度值。

下面几个示例共用样式：

1
2
3
4
5
6

.box {
    width: 160px;
    height: 160px;
    border-radius: 100%;
    border: 5px solid hsla(60, 50% 80%, .8)
}

• 使用 20px circle 制作一个径向半径为20px的圆形径向渐变：

1
2
3

.circle-demo-1 {
    background: radial-gradient(20px circle, hsla(220, 89%, 100%, 1), hsla(30, 60%, 60%, .9))
}

• 使用 6em circle at right bottom 制作一个圆形径向渐变，其半径为6em，圆心在 right bottom 处。

1
2
3

.circle-demo-2 {
    background: radial-gradient(6em circle at right bottom, hsla(220, 89%, 100%, 1), hsla(30, 60%, 60%, .9))
}

除了通过 <size> 给径向渐变显式的设置大小之外，我们还可以通过关键词隐式的为径向渐变设置大小。其中的每个关键词指定径向渐变大小的算法，也就是通过圆心指向径向渐变的边或者角来确定径向渐变的大小。不过在圆形和椭圆形的径向渐变之中，他们算出来的大小略有不同。

closest-side

closest-side 设置一个圆形径向渐变大小时，主要是通过径向边缘与离元素最近边缘的切点到圆心之间的直线距离大决定；设置椭圆形径向渐变大小时，主要通过径向渐变水平与垂直边缘与离最近边缘切点到圆心的直线距离大小决定。如下图所示：

closest-corner

closest-corner 设置圆形径向渐变大小时，主要通过渐变边缘与到元素最近顶角交接点到圆心直线距离决定；设置椭圆形径向渐变大小时，主要通过径向渐变边缘与到元素最近顶角交接点到圆心的直线距离大小决定。如下图所示：

farthest-side

farthest-side 设置圆形径向渐变大小时，主要通过径向渐变边缘与元素最远边的切点到圆心的直线距离大小决定著作权归作者所有；设置椭圆形径向渐变大小时，主要通过径向渐变与元素最远边切点到圆心的直线距离大小决定。如下图所示：

farthest-corner

farthest-corner 设置圆形径渐变的大小时，主要通过径向渐变边缘与元素最远顶角交点到圆心的直线距离决定；设置椭圆形径向渐变时，主要通过渐变边缘与元素最远顶点的交接点到圆心的直线距离决定。如下图所示：

本部分示例可以到文首参考资料中查看
CodePen案例

多色径向渐变

在径向渐变中，除了能设置径向渐变的圆心位置、半径大小之外，还可以设置径向渐的颜色，前面说的都是双色径向渐变，下面做一个多色径向渐变的示例：

1
2
3

.multi-colors-demo-1 {
    background: radial-gradient(red, green, yellow)
}

上面的示例是一个简单的三色径向渐变，只是通过设置三个颜色，从容器的中心向外由红色（red）、绿色（green）到黄色(yellow)。这可以说是最简单的了多色径向渐变了，除此之外，我们还可以给每个颜色设置具体的显示位置：

1
2
3

.multi-colors-demo-2 {
    background: radial-gradient(red 15%, green 60%, yellow 80%)
}

在径向渐变中的渐变颜色，我们可以使用任何表示颜色的格式，并且确定渐变颜色的位置可以使用任何表示长度的单位值，同时颜色数量不会做任何限制，而且前面介绍有关于径向渐变的属性参数都可以配合多种颜色，制作出一些更特殊的径向渐变效果：

1
2
3

.multi-colors-demo-3 {
    background: radial-gradient(farthest-side ellipse at top left, red 15%, green 60%, yellow 80%)
}

多色彩渐变及色标位置与线性渐变中的相关概念类似

重复渐变

线性渐变和径向渐变都属于CSS中背景属性中的背景图片（background-image）属性。有时候我们希望创建一种在一个元素的背景上重复的渐变“模式”。在没有重复渐变的属性之前，主要通过重复背景图像（使用 background-repeat）创建线性重复渐变，但是没有创建重复的径向渐变的类似方式。幸运的是，CSS3通过 repeating-linear-gradient 和 repeating-radial-gradient 语法提供了补救方法。可以直接实现重复的渐变效果。

重复线性渐变

我们可以使用重复线性渐变 repeating-linear-gradient 属性来代替线性渐变 linear-gradient。他们采取相同的值，但色标在两个方向上都无限重复。不过使用百分比设置色标的位置没有多大的意义，但使用像素和其他的单位，重复线性渐变可以创建一些很酷的效果。

1
2
3

.repeat-linear-demo {
    background: repeating-linear-gradient(to right, red, green 36px, orange 72px)
}

在这个例子中从开始红色（red）向36px处的绿色（green）渐变，然后向72px处的橙色（orange）渐变。因为他是一个重复的线性渐变，它不断以这个模式从左至右重复平铺。

重复径向渐变

以同样的方式，你可以使用相关的属性创建重复的径向渐变。语法和 radial-gradient 类似，只是以一个径向渐变为基础进行重复渐变。

1
2
3

.repeat-radial-demo {
    background: repeating-radial-gradient(red, green 36px, orange 72px)
}

制作记事本纸张效果

下面使用重复线性渐变来制作一个记事本纸张背景的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.notepad {
    height: 480px;
    position: relative;
    background: repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px)
}
.notepad::before {
    content: "";
    display: inline-block;
    height: 480px;
    width: 4px;
    border-left: 4px double #FCA1A1;
    position: absolute;
    left: 30px;
}