CSS radial-gradient()函数

• 

  定义和用法

  radial-gradient()函数将径向渐变设置为背景图像。径向梯度由其中心定义。要创建径向渐变，必须至少定义两个色标。

  特征	说明
  CSS版本	CSS3

• 

  浏览器支持

  表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

  函数	IE/Edge	Chrome	FireFox	Safari	Opera
  函数名称
  radial-gradient()	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-

• 

  CSS语法

  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”
  start-color, ..., last-color	颜色停止是您想要渲染平滑过渡的颜色。 该值由颜色值，后跟可选的停止位置（0％和100％之间的百分比或沿梯度轴的长度）组成。

• 

  实例

  具有均匀间隔颜色的径向渐变停止：

  #grad {
    background-image: radial-gradient(red, green, blue);
  }
  

  尝试一下

  具有不同大小关键字的径向渐变：

  #grad1 {
    background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
  }
  
  #grad2 {
    background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
  }
  

  尝试一下