--- theme: condensed-night-purple --- ### 一、定义 CSS **`linear-gradient()`** 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于[``](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient)数据类型，是一种特别的[``](https://developer.mozilla.org/zh-CN/docs/Web/CSS/image)数据类型。 #### 概念描述线性渐变有两线，四点需要理解 - 渐变线（梯度线）：表示渐变的方向，起始点与终点的连线 - 着色线：同象限内，垂直与渐变线的着色线，该线的颜色与着色点颜色一致 - 着色点：渐变线与着色线相交的点 - 起始点：起始点是渐变线上代表起始颜色值的点，起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义 - 终点：终点是渐变线上代表最终颜色值的点，其是起始点关于容器的中心点的对称点 - 终止点：在定义渐变时，描述其颜色最终的位置点，这个点的颜色将为纯正的定义颜色渐变线由包含渐变图像的盒子的中心和一个角度定义的，默认从上到下。 ![image-20220327164737458](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9eb1d48d92a74815a0bc0e01d8f36763~tplv-k3u1fbpfcp-zoom-1.image) ### 二、基本语法 ``` linear-gradient( [ | to ]? , ); ``` #### 第一个参数第一个为可选参数，表示的是梯度线的方向，有两种可选值 0. ``形如 `to left` 由单词 to 和最多两个关键字（`left，right，top，bottom`）组成。第一个关键字表示水平方向，第二个表示垂直方向。不指定则默认为`to bottom`。 2. ``角度值，如`0deg` 方向值，`0deg`的值相当于指向顶部（类比 `to top`），延顺时针方向旋转。 #### 其余参数后面的参数为渐变值列表，可以为多个，每组为一个``或`` 0. `` 指定颜色和终止点，终止点可为多个，格式如`red 10px 20%`。终止点是可选的，其单位可为像素和百分比。如果不指定则遵循一下规则 | 位置 | 取值规则 | | ----- | -------------------------------------------------------------------------------------------------------------------------------------------- | | 第一个值 | 终止点则为0% | | 最后一个值 | 终止点为100% | | 中间值 | 对前后两终止点的中间剩余空间进行均分，确定终止点。如下等效 `linear-gradient(orange 10%, green, red, blue);` `linear-gradient(orange 10%, green 40%, red 70%, blue 100%);` | 还有个特殊的值`0`，当终止值为`0`时，则会取与前一个终止值相同的值，如 ``` linear-gradient(to right, #000 50%, #fff 0); // #fff的终止点也为50% ``` 2. `` 默认情况下中间点为前后两终止点的中间位置，可以通过设置一个插值来重新定义中间点。插值为像素或百分比。且在两个颜色定义之前插值只能有一个。 ``` linear-gradient(orange, green); // 默认情况下过渡的中间点为50%的位置 linear-gradient(orange, 30%, green); // 通过插值将中间点移动到30%的位置，这样绿的会更多 ``` ### 三、规则 0. 起始点颜色取值：由定义的第一个线性颜色决定，且不论其终止点定义在哪里。如下起始点颜色就为`red` ``` linear-gradient(red 30%, orange, green); // 容器的上部30%为纯红色，然后渐变到橘色，按照中间值规则65%位置为纯橘色 linear-gradient(red, orange, green); // 容器上部分起点为纯红色，且从0%位置渐变到橘色，且50%的位置为纯橘色 ``` 2. 终点颜色取值：终点的取值由最后一个线性颜色决定。如下定义终点颜色为`green` ``` linear-gradient(red 30%, orange 60%, green); ``` 3. 终止点的延伸：若渐变色定义为最后一个，则其后剩余空间颜色均为该颜色。如下容器剩余的50%空间内颜色均为`green` ``` linear-gradient(red 10%, orange 30%, green 50%); ``` 4. 颜色渐变长度：起始点和终止点或上一个终止点和下一个终止点之间的间隔。 - 渐变速率还由渐变长度的中间点决定，默认为渐变长度的中点，也可由``属性自定义 - 若定义了两个相同终止点的颜色，则会在该终止点形成一条生硬线 ``` linear-gradient(red 30%, orange 30%, green); // 红色和橘色是生硬的没得过渡，橘色到绿色是以65%为中间点的渐变过渡 ``` 5. 渐变色层级：前一个渐变色的定义，会有比后一个渐变色定义更高的优先级 ``` linear-gradient(red 40%, orange 30%); // 前40%为红色，后面全是橘色。而不是红色到30%终止！ ``` ### 四、一些列子 #### 1. [网格线](https://stackblitz.com/edit/web-platform-nqaxn8?file=styles.css) ``` background-image: linear-gradient(to right, transparent 9px, rgba(0, 0, 0, 0.2) 9px), linear-gradient(to bottom, transparent 9px, rgba(0, 0, 0, 0.4) 9px); background-size: 10px 10px; ``` ![image-20220327165016308](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c7d2f2729762446e99984034df04b08d~tplv-k3u1fbpfcp-zoom-1.image) #### 2. [斑马线](https://stackblitz.com/edit/web-platform-rv2pzk?file=styles.css) ``` width: 315px; height: 200px; background-image: linear-gradient(to right, #000 50%, #fff 50%); background-size: 30px; ``` ![image-20220327165036310](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b751fde38991436ba3432883107762f7~tplv-k3u1fbpfcp-zoom-1.image) #### 3. [倾斜线](https://stackblitz.com/edit/web-platform-rv2pzk?file=styles.css) ``` width: 300px; height: 200px; background-image: linear-gradient( 45deg, #cc95c0 25%, #dbd4b4 0 50%, #cc95c0 50% 75%, #dbd4b4 0 /* 0比较特别，会跟随上一个终止点 75% */ ); background-size: 50px 50px; ``` ![image-20220327165054508](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1a80ea4cfef481bb0af7d70a9b237f1~tplv-k3u1fbpfcp-zoom-1.image) ### 五、实现使用canvas来简单实现下，渐变的渲染规则。可见[demo](https://stackblitz.com/edit/web-platform-dlvit3?file=script.js)，左侧是canvas绘制，右侧是css，值为 ``` background-image: linear-gradient(red, yellow 20%, blue 60%, orange 50%, darkgreen 90%); ``` ![image-20220327165112886](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b573e41e7b8140deb549556920548a01~tplv-k3u1fbpfcp-zoom-1.image) 并非完整版，仅实现部分规则