27-渐变

1. 线性渐变

• 渐变不是一个新的属性, 而是一个取值

• 默认情况下线性渐变是从上至下的渐变
  1.1 我们可以通过在颜色的前面添加to xxx修改渐变的方向
  用关键字：

   to left：
   设置渐变为从右到左。相当于: 270deg
  
  
   to right：
   设置渐变从左到右。相当于: 90deg
  
  
   to top：
   设置渐变从下到上。相当于: 0deg
  
  
   to bottom：
   设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
  
   to left top;
   设置渐变右下到左上
  
  
   to left bottom;
   设置渐变右上到左下
  
  
   to right top;
   设置渐变左下到右上
  
  
   to right bottom;
   设置渐变左上到右下
  
  
   *  格式:background:linear-gradient(to left,red,blue);
  
  
   30%以前不渐变, 从30%开始慢慢渐变到下一个颜色
   background: linear-gradient(red 30%, blue);
  

1.2 除了可以通过关键字控制渐变的方向以外, 还可以通过角度来控制渐变的方向, 角度是按照顺时针旋转.

• 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

  
  
  

  image.png

• 但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。
  换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

2. 径向渐变

   可以在颜色前面添加at和关键字来指定从什么位置开始渐变
   background:radial-gradient(at left top,red, blue);
   
   
   除了可以通过关键字指定从什么位置开始渐变以外,
   还可以通过指定具体像素来指定从什么位置开始渐变
   background:radial-gradient(at 50px 50px,red, blue);
   
   也可以在颜色前面直接加上一个具体的像素来指定渐变的范围
   background:radial-gradient(150px,red,blue);
   

编写规范:
如果既要指定扩散的范围, 又要指定起始位置, 那么把扩散的范围写在前面, 而起始位置写在后面

    background:radial-gradient(50px at right bottom ,red, blue);