CSS3之渐变

1.线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

• 从上到下（默认）

div {
        background-image: linear-gradient(#e66465, #9198e5);
    }

• 从左到右

div{
      height: 200px;
      background-image: linear-gradient(to right, red , yellow);
    }

• 对角：指定水平和垂直的起始位置来制作一个对角渐变

div{
      height: 200px;
      background-image: linear-gradient(to bottom right, red, yellow);
    }
/*从左上角到右下角的线性渐变*/

2.径向渐变（Radial Gradients）- 由它们的中心定义

• 创建一个径向渐变，至少要定义两种颜色结点。同时，也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
• 均匀分布（默认）

div{
        background-image: radial-gradient(red, yellow, green);
    }

• 颜色节点不均匀分布

div{
        background-image: radial-gradient(red 5%, yellow 15%, green 60%);
    }

• 设置径向渐变的形状:shape 参数定义了形状。它可以是值 circle（圆形） 或 ellipse（椭圆形-默认值）。

div{
      background-image: radial-gradient(circle, red, yellow, green);
    }