CSS3_线性渐变_径向渐变----背景

 

渐变的本质： 绘制一张背景图片，所以使用 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%
    第一个颜色百分比不写，默认
    */

阿萨德啊阿萨德

阿萨德阿萨德

阿萨德