当前位置主页 > 资料库 > 前端教程 > radial-gradient() | CSS属性参考

radial-gradient() | CSS属性参考

11-09

CSS radial-gradient()函数用来创建一个径向渐变。一个渐变数据类型<gradient>实际上是一张图片,它由两种或更多的颜色通过平滑渐进过渡形成。

径向渐变是指从起点到终点颜色从内到外进行的圆形渐变。例如下面是一些径向渐变的示意图:

径向渐变

创建径向渐变

假如你使用黄色、绿色和紫色3种颜色来制作一个径向渐变,并且没有指定任何的color stop和尺寸大小等,那么得到的效果如下图所示:

radial-gradient(yellow, #009966, purple);

径向渐变效果-1

当没有指定径向渐变的形状和尺寸时,默认使用椭圆形渐变。如果你要使用圆形渐变效果,可以使用关键字:circle

radial-gradient(circle, yellow, #009966, purple);

径向渐变效果-2

线性渐变相同,你可以控制每种颜色的起始位置和结束位置。例如下面的例子使绿色从20%开始:

radial-gradient(yellow, #009966 20%, purple);

径向渐变效果-3

如果你要制作颜色键没有平滑过渡的效果,可以使用下面的CSS规则:

radial-gradient(yellow, yellow 20%, #009966 20%, #009966 50%, purple 50%, purple);

径向渐变效果-4

控制径向渐变的位置和尺寸

径向渐变允许你指定渐变的形状(圆形或椭圆形)和大小(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover))。

要设置径向渐变的中心位置,可以在关键字之后设置一个位置,这和设置background-position是类似的。

例如,要想将径向渐变的中心点设置在0% 0%的位置(默认径向渐变的中心点位置在50% 50%的位置),可以使用下面的CSS规则:

radial-gradient(at 0% 0%, yellow, #009966, purple);

得到的效果如下图所示:

径向渐变效果-5

如果你想制作一个圆形的径向渐变,并且中心点位置位于左侧边的50%处,那么可以使用下面的规则:

radial-gradient(circle at 0% 50%, yellow, #009966, purple);

径向渐变效果-6

你还可以控制径向渐变的尺寸大小。例如将一个圆形的径向渐变设置为100像素大小。

radial-gradient(100px circle at 0% 50%, yellow, #009966, purple);

径向渐变效果-7

如果是设置椭圆形的渐变尺寸,则需要给出两个长度:第一个指定水平方向的尺寸,第二个指定垂直方向的尺寸。例如:

radial-gradient(200px 100px ellipse at 25% 50%, yellow, #009966, purple);

径向渐变效果-8

官方语法

radial-gradient()径向渐变的官方语法为:

<radial-gradient> = radial-gradient(
  [ [ circle               || <length> ]                          [ at <position> ]? , |
    [ ellipse              || [ <length> | <percentage> ]{2} ]    [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]                  [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)

/* 其中 */
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

<color-stop> = <color> [ <percentage> | <length> ]?

参数:

  • <position>:主要用来定义径向渐变的圆心位置。此值类似于CSS中background-position属性,用于确定元素渐变的中心位置。如果这个参数省略了,其默认值为“center”。其值主要有以下几种:
    • <length>:用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
    • <percentage>:用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
    • left:设置左边为径向渐变圆心的横坐标值。
    • center:设置中间为径向渐变圆心的横坐标值或纵坐标。
    • right:设置右边为径向渐变圆心的横坐标值。
    • top:设置顶部为径向渐变圆心的纵标值。
    • bottom:设置底部为径向渐变圆心的纵标值。
  • <shape>:主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”。
  • <size>:主要用来确定径向渐变的结束形状大小。如果省略了,其默认值为“farthest-corner”。可以给其显式的设置一些关键词,主要有:
    • closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边。
    • closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角。
    • farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边。
    • farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角
  • <color-stop>:径向渐变线上的停止颜色,类似于线性渐变的<color-stop>。径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点,100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。
在线演示

radial-gradient(closest-side circle, yellow, #009966, purple);


radial-gradient(closest-side ellipse, yellow, #009966, purple);

浏览器支持

CSS3线性渐变的浏览器兼容性列表如下:

CSS3 渐变属性的浏览器兼容性列表

相关阅读
Previous:
上一篇:linear-gradient() | CSS属性参考
Next:
下一篇:CSS属性参考
返回顶部