Linear-gradient()

亦凉 2024-05-24 03:55 58阅读 0赞

## Linear-gradient() ##

### 定义与参数 ###

*  `linear-gradient()` 函数创建一副图像，这副图像在 2 个或多个颜色之间沿着直线渐进式过渡。
    
     *  是不是好像懂了？先看一段代码。生成的图像从红色 - 绿色 - 蓝色 - 黄色，变化的方向从上到下。四个颜色的位置分别在 0%，33.3%，66.7%，100% 处。
     *      background: linear-gradient(red, green, blue, yellow);
     *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center]
 *  那我们看看这个函数的参数就只是很多颜色吗？
    
     *  `边或角`：这个参数指定了颜色渐变线`开始点`的位置。(开始点会在后面说)
        
         *  如果参数是`边`，包含两个关键词，且关键词以 `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);
             *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center 1]
             *  稍微解释这幅图，颜色的变化从红色开始，在图高度的 50% 转变成绿色，在图高度的 75% 转变成蓝色，最终在 100% 结束于黄色。
         *  例2
            
             *  如果我们指定的数值错误会发生什么情况？
             *      background: linear-gradient(red, green 50%, blue 75%, 
                      yellow 60%);
             *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center 2]
             *  糟糕，蓝色和黄色之间没有过渡，因为代码的逻辑是蓝色应该在 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%);
             *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center 3]
             *  每个颜色后面都有两个百分比参数，分别表示颜色开始的位置，和结束的位置。要保证颜色重合，只需后面颜色的开始位置在前面颜色结束位置之前。
     *  `color hint`: 第三个参数按字面意思翻译就是`颜色暗示`。这是一个插值暗示，定义了相邻两个颜色 ( `color-stop` ) 之间如果过渡。这个参数是长度值，确定了两个颜色长度中哪一点应该是颜色变化的中点。如果忽略，默认两个颜色长度的中点是颜色变化的中点。
        
         *      background: linear-gradient(red, blue);
                  background: linear-gradient(red, 20%, blue);
         *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center 4]
         *  同样，我们试一下给出的参数异常，会出现什么情况？
         *      background: linear-gradient(red, -20%, blue); // 蓝色
                  background: linear-gradient(red, 120%, blue); // 红色
         *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center 5]
     *

### 组成 ###

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

### 浏览器兼容性 ###

*      .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`函数，[菜鸟教程][Link 1] 说 IE 8 及其之前的版本不支持，为什么会这样请在评论区指教。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/65f1c70316ee47db9e5488175fe5927c.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/38051fd2c0c84753a33eafb28a80cf16.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/981d545abc1a421cb95a19ad0f568737.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/e22c535e020346998a4ffb4d5ea00c62.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/6d43f79137aa45d99ba1e19bcf8013f3.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/35498a965fd74ccba4afdf9c56ac09de.jpg
[mozilla]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/d7e37e00d95144c884e2538984634dfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jyb2tlbl9wcm9taXNl_size_16_color_FFFFFF_t_70_pic_center 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/fe72974744b34624acb7793d09faaa33.jpg
[Link 1]: https://www.runoob.com/try/try.php?filename=trycss3_gradient-linear_trans