28、CSS3 径向渐变

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

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

shape 参数定义了形状，shape有以下两个参数：

  • 值 circle，circle 表示圆形。
  • 值 ellipse，ellipse 表示椭圆形。默认值是 ellipse。

size 参数定义了渐变的大小。它可以是以下四个值：

  • closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
  • farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
  • closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
  • farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变

例

<html>
<head>
<style>
#div1{ 
  width: 300px; height: 150px;
  background: radial-gradient(red, #ff0, green);
}
#div2{ 
  width: 200px; height: 200px;
  background: radial-gradient(circle, red, #ff0, green);
}
#div3{ 
  width: 150px; height: 150px;
  border-radius: 75px;
  background: -webkit-radial-gradient(30% 30%, #ff0, red);
}
</style>
</head>
<body>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
</body>
</html>

div1：radial-gradient(red, #ff0, green);shape默认值为椭圆ellipse，这里没有设置shape，故渐变的形状是椭圆。从内到外的颜色变化为红->黄->绿。
图片说明

div2：radial-gradient(circle, red, #ff0, green);设置了shape为circle圆形，故径向渐变的形状是圆形。从内到外的颜色变化为红->黄->绿。
图片说明

div3： -webkit-radial-gradient(30% 30%, #ff0, red);以30% 30%为起点，颜色变化为黄->红。
图片说明

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }表示重复渐变：
图片说明