漸變的本質： 繪製一張背景圖片，所以使用 background 或者 background-image

background 的諸多屬性，漸變都是可以使用的（repeat，position）

百分比： 把元素漸變方向的整體長度看成 100%

線性漸變

• 使用：    （至少三個引數，從第二個引數開始，都是顏色）
• background-image: linear-gradient( 方向    開始顏色    結束顏色);

• 方向
  • 預設值（從上到下）

    • background-image: linear-gradient(#000, #fff);

       

  • to right    到右

    • background-image: linear-gradient(to right, #000, #fff);
      background-image: linear-gradient(to left, #000, #fff);
      background-image: linear-gradient(to top, #000, #fff);
      background-image: linear-gradient(to bottom, #000, #fff);
       
      

       

  • to right bottom    到右下角

    • background-image: linear-gradient(to right bottom, #000, #fff);
      background-image: linear-gradient(to right top, #000, #fff);
      background-image: linear-gradient(to left top, #000, #fff);
      background-image: linear-gradient(to left bottom, #000, #fff);
       
      

       

  • 角度 deg

    • background-image: linear-gradient(0deg, #000, #fff);
      background-image: linear-gradient(90deg, #000, #fff);
      background-image: linear-gradient(180deg, #000, #fff);
      background-image: linear-gradient(270deg, #000, #fff);
      
      background-image: linear-gradient(45deg, #000, #fff);
      background-image: linear-gradient(135deg, #000, #fff);
      background-image: linear-gradient(225deg, #000, #fff);
      background-image: linear-gradient(315deg, #000, #fff);
      
      background-image: linear-gradient(-45deg #000, #fff);
      background-image: linear-gradient(-90deg #000, #fff);

       

• 顏色結點

  • background-image: linear-gradient(red %10， green 20%， blue 30%, yellow 40%);
    
    /*
    從 0% 到 10% 為 red
    從 10% 到 20% 為 red 到 green 的漸變
    從 20% 到 30% 為 green 到 blue 的漸變
    從 30% 到 40% 為 blue 到 yellow 的漸變
    從 40% 到 100% 為 yellow 
    
    
    最後一個顏色百分比不寫，預設到 100%
    第一個顏色百分比不寫，預設
    */

阿薩德啊阿薩德

阿薩德阿薩德

阿薩德