1．径向渐变
radial-gradient() 函数用于创建一个径向渐变的“图像”，其一般调用格式为：
background-image: radial-gradient(shape size at position, start-color, …, last-color);
其中，参数shape定义渐变的形状，默认值为ellipse，指定椭圆形的径向渐变，值circle指定圆形的径向渐变。
参数size 定义渐变的大小，可能值有：
farthest-corner(默认)：指定径向渐变的半径长度为从圆心到离圆心最远的角；
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
参数position 定义渐变的位置。可能值有：
center(默认)：设置中间为径向渐变圆心的纵坐标值。
top：设置顶部为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。
参数start-color，…，last-color用于指定渐变的起止颜色，可以使用长度值或百分比来指定起止色位置，但不允许负值。
repeating-radial-gradient() 函数用于创建重复的径向渐变“图像”，其一般调用格式为：
background-image: repeating-radial-gradient(shape size at position,start-color, …, last-color);
设在页面中有，若定义.shape的样式规则为：
.shape
{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image:radial-gradient(red , yellow);
}
可在页面中显示如图1所示的图案。图1中径向渐变从中心点开始以椭圆的形式向外渐变，颜色从红色开始，渐变转为黄色。
图1 红色以椭圆形状渐变为黄色
若修改.shape样式中background-image属性定义为：
background-image:radial-gradient(circle, red , yellow);
则在页面中显示如图2所示的图案。图2中径向渐变是以圆形的方式进行，颜色同样从红色开始，渐变转为黄色。
图2 圆形径向渐变
若修改.shape样式中background-image属性定义为：
background-image:radial-gradient(closest-side , red , yellow);
则在页面中显示如图3所示的图案。此时由于指定径向渐变的半径长度为从圆心到离圆心最近的边(上下两条边)，因此图3对比图1，黄色面积明显增大。读者可以试试将closest-side 依次修改为farthest-corner(默认)、closest-corner和farthest-side后，页面显示的图形与图3的差别。
图3 渐变大小为closest-side的径向渐变
若修改.shape样式中background-image属性定义为：
background-image:radial-gradient(closest-side at 60% 55%, red , yellow);
则在页面中显示如图4所示的图案。由于设置的渐变中心位置往右下偏了，因此图4中的椭圆形状向右下偏。
图4 渐变中心位置at 60% 55%
径向渐变可以指定多个颜色，例如若修改.shape样式中background-image属性定义为：
background-image:radial-gradient(red,orange,yellow,green,indigo,blue,violet);
则在页面中显示如图5所示的图案。
图5 七彩径向渐变
径向渐变中指定的颜色可以使用透明度，例如若修改.shape样式中background-image属性定义为：
background-image:radial-gradient( rgba(255,0,0,0), rgba(255,0,0,1));
则在页面中显示如图4所示的图案。
图6 使用了透明度的红色径向渐变
径向渐变中指定的颜色还可以定义停止位置，例如若修改.shape样式中background-image属性定义为：
background-image:radial-gradient(red 5%, green 15%, blue 60%);
则在页面中显示如图7所示的图案。
图7 颜色结点不均匀分布
若修改.shape样式中background-image属性定义为：
background-image:radial-gradient(red 50%, yellow 50%);
则均在页面中显示如图8所示的图案。此时，红黄两种颜色界限清楚，取消了渐变效果。
图8 黄底红圆
若修改.shape样式中background-image属性定义为：
background-image:radial-gradient(red 33%, yellow 33%, yellow 66%,blue 66%);
则在页面中显示如图9所示的图案。
图9 蓝底中的红黄椭圆
若修改.shape样式中background-image属性定义为：
background-image:radial-gradient(red 33%, yellow 66%,blue 66%);
则在页面中显示如图10所示的图案。注意图10与图9的差别，图10中间部分是红色向黄色的径向渐变。