动画相关之线性渐变和径向渐变

线性渐变

线性渐变，表示两种颜色或多种颜色之间的平滑过渡。由渐变线和色标组成，渐变线控制渐变方向，色标控制颜色变化(包含一个颜色值和位置)。

渐变线

渐变线的起点和终点与渐变框一个角垂直线相交，且经过渐变框中心。

1. 角度

渐变线可以使用角度来指定方向，0deg表示沿着元素中心的Y轴从下到上，正直表示顺时针旋转。

2. 关键字

渐变线也可以使用关键字来指定方向，默认为to bottom。

to top 表示 0deg
to right 表示 90deg
to bottom 表示 180deg
to left 表示 -90deg(或270deg)
to top left 表示 -45deg(或315deg)
to top right 表示 45deg
to bottom left 表示 -135deg(或225deg)
to bottom right 表示 135deg

色标

色标由颜色值和位置组成，每个线性渐变至少设置两个色标。

1. 如果只有两个色标，可省略位置，将分别为0%和100%位置。

// 等于linear-gradient(red 0%,blue 100%)
linear-gradient(red,blue);

2. 如果只有两个色标，且设置位置，则0%_{n%为第一种颜色，n%}m%为第一种颜色到第二种颜色的过渡，m%~100%为第二种颜色。

background-image: linear-gradient(red 20%,blue 80%);
// 等价
background-image: linear-gradient(red 0%,red 20%,blue 80%,blue 100%);

3. 如果多个色标指定同一位置，处在中间的色标无效。

background-image: linear-gradient(red 50%,white 50%,black 50%);
// 等价
background-image: linear-gradient(red, 50%,black 50%);

4. 如果多个色标没有指定位置，则均匀分布。

// 各占33.333%
background-image: linear-gradient(red,green,blue);

重复渐变

重复渐变，表示重复线性渐变的效果，使色标在渐变线上无线重复。值得注意的是，只有首尾两个色标位置不在0%或100%时，重复渐变才生效。

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

径向渐变

径向渐变(Radial-gradient)，指从椭圆中心点由内向外进行颜色渐变。由椭圆和色标组成，椭圆控制渐变位置、大小和形状，色标控制颜色变化(包含一个颜色和位置)。

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

椭圆

椭圆控制渐变形状、大小和位置。

1. 形状

椭圆形状(shape)，可选择圆(Circle)或椭圆(Ellipse)，默认为Ellipse。

2. 大小

可使用关键字，百分比或长度单位。如果是圆，则表示半径；如果是椭圆，第一个值表示水平直径，第二只表示垂直直径；如果是关键字，如下所示：

closest-side: 最近边
closest-corner: 最近角
farthest-side: 最远边
farthest-side: 最远角

3. 位置

椭圆位置有多种表示方式，可通过关键字，百分比或长度来表示。

// 关键字
left right top bottom
// 百分比：X轴百分比相对框的宽度，Y轴百分比相对于框的高度
50% 60%
// 长度：以左上角为0点进行定位

色标

色标由颜色值和位置组成，每个线性渐变至少设置两个色标。

1. 如果只有两个色标，可省略位置，将分别为0%和100%位置。

// 等于linear-gradient(red 0%,blue 100%)
linear-gradient(red,blue);

2. 如果只有两个色标，且设置位置，则0%_{n%为第一种颜色，n%}m%为第一种颜色到第二种颜色的过渡，m%~100%为第二种颜色。

background-image: radial-gradient(red 20%,blue 80%);
// 等价
background-image: radial-gradient(red 0%,red 20%,blue 80%,blue 100%);

3. 如果多个色标指定同一位置，处在中间的色标无效。

background-image: radial-gradient(red 50%,white 50%,black 50%);
// 等价
background-image: radial-gradient(red, 50%,black 50%);

4. 如果多个色标没有指定位置，则均匀分布。

// 各占33.333%
background-image: radialr-gradient(red,green,blue);

重复渐变

重复渐变，表示重复线性渐变的效果，使色标在渐变线上无线重复。值得注意的是，只有首尾两个色标位置不在0%或100%时，重复渐变才生效。

background-image: repeating-radial-gradient(red 20%,blue 80%);