学习css3之linear-gradient

作者 likaiqiang 日期 2019-07-14
学习css3之linear-gradient

渐变的基本语法

linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+);

梯度线

在说渐变之前,先说一下什么是梯度线,渐变的梯度线方向决定了渐变的方向,梯度线永远过元素的中心点,0度梯度线相当于关键字to top,表示垂直于水平线的那条线(貌似叫铅垂线),方向向上,所以0度的渐变就长这样:

这俩是一样的。

55deg的渐变

比对这俩渐变可以得出,渐变角度的方向是顺时针旋转的。所以 to right相当于90deg,to left相当于-90deg,to bottom相当于180deg

以上是理想情况下(box元素恰好是方形,梯度线不是水平就是垂直),我们写梯度线时经常这么写linear-gradient(to top right,red,blue),这里的top right指的难道是右上角?如果元素是正方形是这样的。如果元素不是正方形呢?

图上的箭头就是该渐变的梯度线,可以发现并不过右上角,那这条线是怎么得到的?

从字面意思上可以看出top right指的是右上方向(梯度线的大概位置),过元素的中心点把与右上角相邻的两个角连接起来,相邻的两个角是左上角和右下角,过元素的中心点做那条线的垂线,垂线指向右上方的方向就是梯度线的方向。

渐变的长度

如果我们不写长度,渐变是均匀分配的。

来一条彩虹。。。

上面的写法等价于。

结果是一样的。先确定首尾,首尾分别为0% 与 100%,中间的5种颜色总共6种过渡,所以每两种过渡的长度为 100% / 6。

每种颜色后面的长度为每两种颜色过渡的长度,默认为均匀过渡,可以通过设置渐变的中间色来改变过渡的规则。

长度为不正常值

上面的例子都是色标为正常值(即后面的色标大于前面的),那要是后面的色标小于前面的呢,会发生什么?

绿色和蓝色之间没有渐变了。如果某个色标的值小于其前面的色标,那么这个色标的值就相当于它前面色标最大的那个。

上面的写法等价于

background-image: linear-gradient(90deg,red 0%,orange 20%,yellow 40%,green 60%,blue 60%,violet 100%);

为了方便,也可以这样写

background-image: linear-gradient(90deg,red 0%,orange 20%,yellow 40%,green 60%,blue 0,violet 100%);

长度的单位

渐变长度的大小为任意css长度值,但是我们一般不建议不同的单位混用,因为这样可能会导致后面的色标小于前面的,造成与预期不同的渲染结果。

渐变的中间色

两个色标之间的渐变默认为均匀渐变,我们可以通过改变渐变的中间色来改变渐变规则。