渐变

概念

渐变 (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>