Linear-gradient() 亦凉 2024-05-24 03:55 40阅读 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
相关 android 字体渐变效果怎么做,Android-LinearGradient实现TextView字体渐变的效果 可以看出，这个类提供了两个构造方法： 参数说明： 参数x0：表示渐变的起始点x坐标； 参数y0：表示渐变的起始点y坐标； 参数x1：表示渐变的终点x坐标； 参数y1： 女爷i/ 2022年10月18日 04:56/ 0 赞/ 565 阅读
女爷i
还没有评论，来说两句吧...