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);
    }
    
    尝试一下