CSS radial-gradient() 函数

CSS 3 linear-gradient() 函数可以用来创建径向渐变

background: radial-gradient(shape size at position, start-color, ..., last-color);

值	描述
shape	确定圆的类型: ellipse (默认): 指定椭圆形的径向渐变 circle ：指定圆形的径向渐变
size	定义渐变的大小，可能值： farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。默认值为 `center` 可能的值有： center (默认)：设置中间为径向渐变圆心的纵坐标值 top：设置顶部为径向渐变圆心的纵坐标值 bottom：设置底部为径向渐变圆心的纵坐标值
start-color, ..., last-color	用于指定渐变的起止颜色

径向渐变

径向渐变由中心点定义

为了创建径向渐变必须设置两个终止色

浏览器支持

下表中的数字表示支持该函数的第一个浏览器版本号

"webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀


26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-

范例

下面的代码使用 radial-gradient 创建了径向渐变 - 颜色结点均匀分布

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1- 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6-12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6-15 */
  background: radial-gradient(red, green, blue); /* 标准语法 */
}

运行范例 »

范例 2

颜色结点不均匀分布

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6-12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6-15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准语法 */
}

运行范例 »

范例 3

圆形径向渐变

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, red, yellow, green); /* 标准语法 */
}

运行范例 »

范例 4

不同尺寸大小关键字的使用

#grad1 {
  /* Safari 5.1 to 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
  /* For Opera 11.6 to 12.0 */
  background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* For Firefox 3.6 to 15 */
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* 标准语法 */
  background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
}

#grad2 {
  /* Safari 5.1 to 6.0 */
  background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Opera 11.6 to 12.0 */ 
  background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* For Firefox 3.6 to 15 */
  background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* 标准语法 */
  background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);
}

运行范例 »

简单教程

径向渐变

浏览器支持

范例

范例 2

范例 3

范例 4

延伸阅读

CSS 参考手册