CSS渐变

• CSS3 定义了两种类型的渐变（ gradients ）
  • 线性渐变（ Linear Gradients ）- 向下/向上/向左/向右/对角方向
  • 径向渐变（ Radial Gradients ）- 由它们的中心定义
• 背景的渐变使用的属性是：background-image

线性渐变

• 创建一个线性渐变，必须至少定义两种颜色结点，颜色结点即你想要呈现平稳过渡的颜色
• 同时，你也可以设置一个起点和一个方向（或一个角度）
• 从上到下 ( 默认情况下 )
  • background-image: linear-gradient(red, blue);
• 可以添加方向词改变渐变方向
  • 如果没有带浏览器前缀，需要在方向词前面添加to
    • background-image: linear-gradient(to right, red , blue);
    • 从左到右，由红色渐变到蓝色
    • background-image: linear-gradient(to bottom right,blue,green,red);
    • 从左上到右下，由蓝色渐变到绿色，再由绿色渐变到红色
  • 带浏览器前缀，不用加to
    • background-image: -webkit-linear-gradient(bottom,blue,green,red);
    • 从下到上，由蓝色渐变到绿色，再由绿色渐变到红色
    • background-image: -webkit-linear-gradient(top right,blue,green,red);
    • 从右上到左下
• 如果想要控制渐变的范围，可以在颜色后面添加 %
  • background-image: linear-gradient(blue 50%,black 80%,green 90%);
  • 50% - 80%由蓝色渐变到黑色，80% - 90%由黑色渐变到绿色
• 三色块
  • background-image: linear-gradient(to left bottom,blue 33.33% ,green 33.33%,green 66.66%,pink 66.66%);
  • 两两写，百分比一样，这样就不会出现渐变效果了
  • 33.33% blue到33.33% green，66.66% green到66.66% pink
• 默认的从上到下，不是 0deg的效果，是 180deg的效果
  • background-image: linear-gradient(180deg,blue 33.33% ,green 33.33%,green 66.66%,pink 66.66%); 从上到下，颜色依次是蓝、绿、粉
  • background-image: linear-gradient(0deg,blue 33.33% ,green 33.33%,green 66.66%,pink 66.66%); 从下到上，颜色依次是蓝、绿、粉
  • background-image: linear-gradient(45deg,blue 33.33% ,green 33.33%,green 66.66%,pink 66.66%); 45度渐变 ( 由左下角开始，渐变到右上角)
• 重复渐变
  • background-image: repeating-linear-gradient(to right,blue 50%,green 60%);
  • background-image: repeating-linear-gradient(to right,rgba(0, 0, 255, 0.096) 50%,rgba(0, 128, 0, 0.378) 60%);
• 多层渐变
  • background-image: linear-gradient(rgba(255, 0, 0, 0.255),rgba(0, 0, 255, 0.275)),linear-gradient(green,pink);
• 重复多层渐变
  • background-image: repeating-linear-gradient(to right,rgba(0, 0, 255, 0.096) 50%,rgba(0, 128, 0, 0.378) 60%),repeating-linear-gradient(red 40%,pink 60%);

径向渐变

• 径向渐变：带有指定的角度的线性渐变，径向渐变由它的中心定义
• 创建一个径向渐变，必须至少定义两种颜色结点，颜色结点即你想要呈现平稳过渡的颜色
• 同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小
• 默认情况
  • 渐变的中心是 center（表示在中心点）
  • 渐变的形状是 ellipse（表示椭圆形）
  • 渐变的大小是 farthest-corner（表示到最远的角落）
• 径向渐变 - 颜色结点均匀分布（默认情况下）
  • background-image: radial-gradient(red, green, blue);
• 径向渐变 - 颜色结点不均匀分布
  • background-image: radial-gradient(red 30%,green 50%);
  • 30% - 50%由红色渐变到绿色
• 设置形状
  • shape 参数定义了形状，它可以是值 circle 或 ellipse
  • circle 表示圆形，ellipse 表示椭圆形，默认值是 ellipse
  • background-image: radial-gradient(circle,red,green,blue);
  • background-image: radial-gradient(circle,red 50%,green 50%); 这样就是只有红色和绿色，没有渐变效果了
• 修改圆心的位置，必须添加 at
  • background-image: radial-gradient(at left,red,green,blue,pink);
  • background-image: radial-gradient(at 20px -50px,red,green,blue);
• 重复渐变
  • background-image: repeating-radial-gradient(red 30%,green 50%);
• 多层渐变
  • background-image: repeating-linear-gradient(to right,rgba(0, 0, 255, 0.096) 50%,rgba(0, 128, 0, 0.378) 60%),repeating-radial-gradient(pink 30%,skyblue 50%);