css画一条线-CSS - 线性渐变

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

渐变分为线性渐变和径向渐变。 本文只讨论线性渐变。

线性渐变：变化遵循一条线。

径向渐变：从一点向外渐变。

1. 写作

背景：线性渐变（颜色1，颜色2）；

渐变方向默认从上到下

2.改变渐变方向

1）通过设置渐变的终点

背景：线性渐变（方向，颜色1，颜色2）；

其中css画一条线，direction是设置渐变终点。 （到....）

[从左到右，书写方向为右]

【从左下角到右上角，方向写为torighttop】（看图可以看出是从左下角到右上角，不是按照45度线性变化）

2）通过设置渐变线的起始角度

背景：线性渐变（角度，颜色1，颜色2）；

其中，angle为角度。 从6点开始，顺时针估计，确定渐变的起始位置。

【左上角十点半，135度】

【170度】

3.可设置多种颜色

背景：线性渐变（颜色1，颜色2，颜色3，颜色4....）；

作为一个专业的艺术家，你怎么敢不做出漂亮的渐变呢？

4.设置颜色起始位置

通过设置颜色的起始位置，可以设置颜色的比例，也可以设置渐变的重复次数，还可以设置渐变的起始点。

背景：线性渐变（颜色1长度/百分比，颜色2长度/百分比，颜色3长度/百分比）；

1）长度/百分比是颜色的起始和结束位置，长度表示粗细，百分比表示比例

需要说明的是，对于渐变来说，每种颜色的开始和结束位置都是一个固定点，而不是距离。 因为只有固定点的位置才是最真实的颜色，而无论向两侧任意方向变化，都不再是最纯粹的颜色。 当不设置颜色的起止点时，为均匀渐变，即第一个颜色的起止位置为0%，第二个颜色的起止位置为50%，第三是100%。

【均匀渐变，第二个颜色的起始位置在中间】

[更改第二个颜色的起始位置]

2）设置颜色渐变重复

第一袋和第二袋的区别在于，一个使用比例，另一个使用厚度。

第一个、第二个和第三个的区别在于第三个使用了repeating-linear-gradient()；

所以，当第一和第二个袋子到达第三种颜色的结束位置时，剩余的空间就是第三种颜色。 对于box3，由于重复，当第三种颜色结束时css画一条线，剩余的地方会重新渐变。

5.渐变透明

使用 rgba() 函数定义颜色

rbga(x, y, z, k) 其中，x、y、z 三个数分别取0-255的值。 k取值0-1，0表示透明，1表示不透明。