Linear-gradient()

Linear-gradient()

定义与参数

• linear-gradient() 函数创建一副图像，这副图像在 2 个或多个颜色之间沿着直线渐进式过渡。

  • 是不是好像懂了？先看一段代码。生成的图像从红色 - 绿色 - 蓝色 - 黄色，变化的方向从上到下。四个颜色的位置分别在 0%，33.3%，66.7%，100% 处。

  •   background: linear-gradient(red, green, blue, yellow);
    

  • 

• 那我们看看这个函数的参数就只是很多颜色吗？

  • 边或角：这个参数指定了颜色渐变线开始点的位置。(开始点会在后面说)
    • 如果参数是边，包含两个关键词，且关键词以 to 开始。
      • 若指定颜色在水平方向变化，即 left 或 right
      • 若指定颜色在垂直方向变化，即 top 或 bottom
      • 参数的值可以是 to top，to bottom， to left， to right，换算成角度分别对应 0deg，180deg，270deg，90deg。或者 to bottom right(右下)，to top left(左上) 等
    • 如果参数是角，直接写角度即可，记得带单位，如45deg。
      • 角度更加灵活，因为使用边只能指定颜色在水平或垂直方向变化。
      • 度数和单位之间不能有空格！
      • 度数可以是负数。
      • 度数顺时针增大。
  • color stop: 由一个颜色值组成，并且后面跟着 1 或 2 个可选的终点位置。这个位置可以百分比值，也可以是沿着渐变轴的长度值。
    • 例1
      • 我们将上图的绿色的位置调整为 50%，蓝色的位置调整为 75%

      •   background: linear-gradient(red, green 50%, blue 75%, 
          yellow);
        

      • 
      • 稍微解释这幅图，颜色的变化从红色开始，在图高度的 50% 转变成绿色，在图高度的 75% 转变成蓝色，最终在 100% 结束于黄色。
    • 例2
      • 如果我们指定的数值错误会发生什么情况？

      •   background: linear-gradient(red, green 50%, blue 75%, 
          yellow 60%);
        

      • 
      • 糟糕，蓝色和黄色之间没有过渡，因为代码的逻辑是蓝色应该在 60% 的地方过渡为黄色，黄色和蓝色范围有了重合，按照官方文档的说法，在重合的颜色之间会有硬过渡。Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition
      • 如果按照这个错误的做法下去，我们甚至可以画出一幅彩虹，想想怎么做？猜对了，只需要相邻两个颜色在范围重合！

      •   background: linear-gradient(red 0% 15%, orange 10% 30%, 
          yellow 20% 45%, green 10% 60%, blue 45% 75%,
          cyan 60% 87%, purple 60% 100%);
        

      • 
      • 每个颜色后面都有两个百分比参数，分别表示颜色开始的位置，和结束的位置。要保证颜色重合，只需后面颜色的开始位置在前面颜色结束位置之前。
  • color hint: 第三个参数按字面意思翻译就是颜色暗示。这是一个插值暗示，定义了相邻两个颜色 ( color-stop ) 之间如果过渡。这个参数是长度值，确定了两个颜色长度中哪一点应该是颜色变化的中点。如果忽略，默认两个颜色长度的中点是颜色变化的中点。

    •   background: linear-gradient(red, blue);
        background: linear-gradient(red, 20%, blue);
      

    • 
    • 同样，我们试一下给出的参数异常，会出现什么情况？

    •   background: linear-gradient(red, -20%, blue); // 蓝色
        background: linear-gradient(red, 120%, blue); // 红色
      

    • 

组成

• 一个 linear-gradient() 是由一个轴 ( 颜色渐变线 ) 和 2 个或多个 color-stop 组成的。在这个轴上的每一个点都是不同的颜色。为了使颜色渐变平滑， linear-gradient() 画了很多很多有颜色的线与轴垂直，每条线的颜色就是这条线与轴相交的点的颜色。
  • 图片来自官网
  • gradient line 由渐变图像所在 box 的中点和一个角色决定。渐变的颜色由开始点和结束点以及中间的 color stop 决定。
  • 开始点 是 gradient line 上第一个颜色开始的位置。结束点 是 gradient line 最后一个颜色结束的位置。这两个点在与 gradient line 垂直且经过 box 的顶点的直线的垂足处。结束点可以看作开始点关于 box 中点的镜像点。稍显复杂的定义却带来一个有意思的现象：即与开始点最近的顶点的颜色和开始点相同。结束点同理。下图中，box 左上角的顶点与开始点颜色相同，因为这两个点在同一条垂直于 gradient line 的直线上。
  • 

浏览器兼容性

•   .bcg-gradient {
        height: 300px;
        width: 200px;
        /* opera */
        background: -o-linear-gradient(to top, orange, skyblue);
        /* firefox */
        background: -moz-linear-gradient(to top, orange, skyblue);
        /* safari */
        background: -webkit-linear-gradient(to top, orange, skyblue);
        background: linear-gradient(to top, orange, skyblue);
    }
  

• 在我的电脑上，IE 9 及其之前的版本不支持linear-gradient函数，菜鸟教程 说 IE 8 及其之前的版本不支持，为什么会这样请在评论区指教。