css3渐变之径向渐变

  径向渐变由它的中心定义。可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

  语法:background: radial-gradient(center, shape size, start-color, ..., last-color);

  径向渐变中,默认情况下,颜色会均匀分布。如:

  #grad {

      background: -webkit-radial-gradient(red, green, blue); /* Safari和chrome */

      background: -o-radial-gradient(red, green, blue); /* Opera */

      background: -moz-radial-gradient(red, green, blue); /* Firefox */

      background: radial-gradient(red, green, blue); /* 标准的语法 */

      }

  

  颜色不均匀分布。如:

  #grad {

      background: -webkit-radial-gradient(red 15%, green 30%, blue 70%); /* Safari和chrome */

      background: -o-radial-gradient(red 15%, green 30%, blue 70%); /* Opera  */

      background: -moz-radial-gradient(red 15%green 30%blue 70%); /* Firefox */

      background: radial-gradient(red 15%green 30%blue 70%); /* 标准的语法 */

      }

  center参数定义了渐变的中心,可以是具体的像素,可以是百分比,也可以直接是center。

  shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

  渐变形状的大小比较灵活,可取以下值: 

    closest-side:(渐变形状是圆形时)以距离中心点最近的一边为渐变半径,或者(渐变形状是椭圆形时)以距离中心点最近的水平或垂直边为渐变半径。
    closest-corner:以距离中心点最近的一角为渐变半径。
    farthest-side:和 closest-side 正好相反,(渐变形状是圆形时)以距离中心点最远的一边为渐变半径,或者(渐变形状是椭圆形时)以距离中心点最远的水平或垂直边为渐变半径。
    farthest-corner:以距离中心点最远的一角为渐变半径。
    cover:和 farthest-corner 完全一样。
    contain:和 closest-side 完全一样。

  

  浏览器的支持情况

    

  表中的数字指定了完全支持该属性的第一个浏览器版本。后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。

  

  注意:在用到径向渐变时,需写上对应的浏览器前缀,否则不会有效果。

 

原文地址:https://www.cnblogs.com/jf-67/p/6999723.html