CSS radial-gradient() 函数 - 用径向渐变创建图像

radial-gradient()

radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义，为了创建径向渐变你必须设置两个终止色。

定义与用法

radial-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.1 -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：设置顶部为径向渐变圆心的纵坐标值。     ● bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color	用于指定渐变的起止颜色。

 

 

以下实例演示了径向渐变 - 颜色结点均匀分布:

实例

效果图：

以下实例演示了径向渐变 - 颜色结点不均匀分布: 

实例

效果图：

以下实例演示了径向渐变 - 圆形径向渐变:

实例

 



椭圆形 Ellipse（默认）：

圆形 Circle：

效果图：

以下实例演示了径向渐变 - 不同尺寸大小关键字的使用:

实例

 
 



closest-side：