首页 » CSS »
网站地图

CSS 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); /* 标准语法 */
}

运行一下 »

定义与用法

linear-gradient() 函数用径向渐变创建 "图像"。

径向渐变由中心点定义。

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

径向渐变实例

支持版本：CSS3

浏览器支持

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

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

函数




radial-gradient() 26.0
10.0 -webkit- 		10.0 16.0
3.6 -moz- 		6.1
5.1 -webkit- 		12.1
11.6 -o-

CSS 语法 

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（默认）： 设置中间为径向渐变圆心的纵坐标值。
    • <
  • top： 设置顶部为径向渐变圆心的纵坐标值。
    • li> bottom： 设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color 用于指定渐变的起止颜色。

更多实例

实例

颜色结点不均匀分布: 

#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%); /* 标准语法 */
}
运行一下 »

实例

圆形径向渐变: 

#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); /* 标准语法 */
}
运行一下 »

实例

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

#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);
}
运行一下 »