本文已参与「新人创作礼」活动，—起开启掘金创作之路。

渐变

概念

渐变 (gradients) 可以让我们在两个或多个颜色之间进行平稳的过渡。

曾经我们只有使用图像来实现颜色的过渡效果，但渐变的出现，可以让用户使用时 减少下载的时间 和 宽带的使用 。

渐变效果的元素在放大时看起来效果会更好，这是因为渐变是由浏览器自己生成的。

渐变分为 线性渐变 和 径向渐变。

线性渐变（Linear Gradients） ：向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients） ：由它们的中心定义

IE9及以下不兼容

径向渐变

径向渐变（放射性的效果），效果和线性渐变类似。

不同的是，默认情况下径向渐变的形状根据元素的形状来计算的。

我们可以指定渐变的中心、形状（圆形或椭圆形）、大小。

默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape：形状
- ellipse：椭圆，默认
- circle：圆角
size：大小
- closest-side：近边
- farthest-side：远边
- closest-corner：近角
- farthest-corner：远角，默认
position：位置
- xpx ypx：具体值 (x轴，y轴)
- x% y% ：百分比 (x轴，y轴)
- 方位词
- 注意：如果只写一个属性，第二个默认是 50% (center)
color：颜色，至少要写两个，可以写多个

不设置形状和大小

 <style>
   div {
     float: left;
     margin: 5px;
     width: 200px;
     height: 100px;
     background-image: radial-gradient(red, yellow);
   }
 
   .one {
     /* 多颜色 */
     background-image: radial-gradient(red, pink, yellow);
   }
 
   .two {
     /* 手动分配颜色 */
     background-image: radial-gradient(red 10%, pink 40%, yellow);
   }
 </style>
 <body>
   <div></div>
   <div class="one"></div>
   <div class="two"></div>
 </body>

设置形状

我们也可以设置形状，而shape参数定义了形状，它可以是 circle(圆形) 或 ellipse(椭圆形，默认)。

 <style>
   div {
     float: left;
     margin: 5px;
     width: 200px;
     height: 100px;
     /* 这里设置三个值的原因是，看起来更加直观 */
     /* 圆形 */
     background-image: radial-gradient(circle, red, pink, yellow);
   }
 
   .one {
     /* 椭圆 */
     background-image: radial-gradient(ellipse, red, pink, yellow);
   }
 </style>
 <body>
   <div></div>
   <div class="one"></div>
 </body>

设置大小

当然我们也可以自定义大小，而size参数定义了大小

可以设置的值：

closest-side：近边
farthest-side：远边
closest-corner：近角
farthest-corner：远角，默认

 <style>
   div {
     float: left;
     margin: 5px;
     width: 200px;
     height: 200px;
     /* 需要设置位置，才能直观分辨 */
     /* 默认大小，farthest-corner 远角 */
     background-image: radial-gradient(farthest-corner at 60% 55%, red, pink, black);
   }
 
   .one {
     /* closest-corner 近角 */
     background-image: radial-gradient(closest-corner at 60% 55%, red, pink, black);
   }
 
   .two {
     /* closest-side 近边*/
     background-image: radial-gradient(closest-side at 60% 55%, red, pink, black);
   }
 
   .three {
     /* farthest-side 远边 */
     background-image: radial-gradient(farthest-side at 60% 55%, red, pink, black);
   }
 </style>
 <body>
   <div></div>
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
 </body>

使用透明度

 <style>
   div {
     margin: 5px;
     width: 200px;
     height: 100px;
     /* 红色，透明度逐渐增大 */
     background-image: radial-gradient(rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
   }
 
   .one {
     background-image: radial-gradient(transparent, rgba(255, 0, 0, 1));
   }
 </style>
 <body>
   <div></div>
   <div class="one"></div>
 </body>

重复的径向渐变

语法：background-image: repeating-radial-gradient(direction, color1, color2, ...);

重复的径向渐变和不重复的径向渐变一样，只是需要手动指定颜色分配，这样才会出现重复样式。

 <style>
   div {
     float: left;
     margin: 5px;
     width: 200px;
     height: 100px;
     /* 默认椭圆 */
     background-image: repeating-radial-gradient(red, pink 20%);
   }
 
   .one {
     /* 多个颜色 */
     background-image: repeating-radial-gradient(red, pink 20%, black 30%);
   }
 
   .two {
     /* 指定形状、大小和位置 */
     background-image: repeating-radial-gradient(circle closest-side at 60% 55%, red, black 20%);
   }
 </style>
 <body>
   <div></div>
   <div class="one"></div>
   <div class="two"></div>
 </body>

CSS3中的径向渐变知识点整理

渐变

概念