跟着《css揭秘》学css——linear-gradient

homyeeking
377 阅读4分钟

今天看到第二章“背景与边框”的第五小节，里面是用了一个css属性background中的 linear-gradient，渐变这个属性属于最熟悉的陌生人，最基本的只知道给他传入几个颜色值，他就会依次渲染出这几个颜色渐变，但是在书中使用的时候在每个颜色后添加了百分比，如果不了解的话，看起来会很吃力，所以有必要读一下文档，吃透这个属性。

文档链接

要点

  1. 掌握语法
  2. 明白颜色中点的位置的含义（看下面的例子）
  3. 掌握渐变轴的位置的变化（顺时针旋转角度或指定方向）

语法

** 首先渐变是由初始颜色向终止颜色渐变，中间可以有其他的颜色过渡 **

linear-gradient:([渐变轴的位置（可设置成角度(顺时针)如45deg，或to + [left \ right \ top \bottom] ）]， [颜色列表，每个颜色后边可加一个终点位置（可以是百分比或者是沿着渐变轴的长度值）])

上边总共算是两个参数，分别在两个中括号里，光是语法看起来就很头疼了，得结合例子理解一下。

在这之前先了解一下 渐变线的构成：

构成

首先linear-gradient这个函数是用来构建一系列垂直于渐变线的着色线，着色线的颜色取决于与之垂直的渐变线上的点，比如下图，二者相交的点是粉色，那么这条着色线就是粉色的（为了看清相交的点，图中着色线的颜色可以忽略）

一条直线上可以有无数个点，所以我们理论上可以设置无限多个颜色点，其中比较重要的有** 起点 终点 颜色中间点**

** 起点： ** 渐变线和容器的左上角 的交点

** 终点：** 简单理解就是关于容器中心对阵的点

** 颜色中间点：** 即我们设置的起始颜色中间的过渡颜色，同时我们也可以通过后边添加 的数据来改变颜色中间点的位置

下面来举例说明：

例子

初始样式


 div {
          width: 500px;
          height: 200px;
          background: linear-gradient( red, blue);
      }

  1. 改变渐变线的角度
             background: linear-gradient( to right, red, blue);
             background: linear-gradient( 90deg, red, blue);
![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95b44e61703c4ae2865e275c85ce4010~tplv-k3u1fbpfcp-zoom-1.image)

我们可以看到此时变成了水平排列同时上面两种方式是等价的。即 默认是180deg,to bottom ，然后顺时针旋转指定的角度

  1. 颜色中间点

** 简单理解就是 后一个颜色跟的百分比或长度值就是前一个颜色终止的地方，也是当前颜色向下一颜色渐变的开始的地方 **

从红色向蓝色渐变的时候，两个颜色转变的重点默认是两个颜色的中点，也就是50%处，但是我们也可以手动设置，比如80%

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

我们可以看到转换点跑到了两个颜色之间的80%位置处， 接着我们尝试在中间中填充颜色

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

我们在起始（red\blue）中间添加了两个中间点黄绿，同样我们也可以在颜色后边设置颜色渐变的位置

          background: linear-gradient( red, yellow 30%, green 40%, blue);

解释上面的代码就是：

  • 从起始点红色到30%处渐变为黄色，

  • 30-40% 黄色渐变为绿色

  • 然后剩下的区域由绿色渐变为蓝色，颜色中间点位置没有指定，默认为中间位置

另外，让后边的颜色转换的位置小于前者，那么会自动替换为前一个值，也就是两个颜色没有发生渐变，同时渲染出来的效果就是一条生硬线

          background: linear-gradient( red, yellow 30%, green 20%, blue);

同时一个颜色也可以设置多个终止位置

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

** 代码解释：**

  • 红色从顶部开始向橙色渐变并在10%处结束，也就是红色成功变为橙色

  • 10-30% 是橙色向橙色渐变，也就是纯橙色效果

  • 30-50% 是橙色向黄色渐变，50%处 橙色成功转变为黄色

  • 50-70% 同上，这一段是纯黄色

  • 70-90%是黄色向绿色转变，90%处成功被绿

  • 90-100% 纯绿

小结

  1. 我们可以通过调整渐变轴的位置（to + [left right top bottom] || deg）来实现我们指定的渐变效果，另外 to left top 表明我们的方向是左上角，所以自然从右下到左上

  2. 我们可以手动设置颜色中间点位置，默认是二者中间处

  3. 颜色后边跟着的百分比或长度 是颜色发生渐变，由当前颜色过渡到下一个颜色开始的位置

如有错误，欢迎评论区指正😁

avatar
文章
阅读
粉丝