css3中的重复渐变是什么？如何使用？

本篇文章给大家带来的内容是介绍css3的重复渐变是什么？如何使用？（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先我们就来介绍一下重复渐变是什么？

在css3中除了可以实现线性渐变【linear-gradient()】，径向渐变【radial-gradient()】外，还可以实现重复渐变。css3中重复渐变可以分为两种：

重复线性渐变：repeating-linear-gradient()

重复径向渐变：repeating-radial-gradient()

接下面我们通过简单的代码示例来看看两种重复渐变是如何使用的。

重复渐变，在渲染时，终止颜色会在两个方向上无限重复，它们的位置以最后指定的终止颜色的位置和第一个指定的终止颜色的位置之间的差值的倍数移位。例如，repeating-linear-gradient(red 10px, blue 50px) 等效于linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)。注意，最后一个终止颜色和第一个终止颜色总是在每个组的边界处重合，如果渐变没有以相同的颜色开始和结束，这将产生尖锐的过渡。

其实重复渐变的语法和非重复渐变的语法是一样的，例：

repeating-linear-gradient(red, blue 20px, red 40px);

效果图：

repeating-radial-gradient(red, blue 20px, red 40px);

repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%);

如果第一终止颜色和最后一终止颜色之间的距离不是零，但是足够小以至于知道输出设备的物理分辨率不足以忠实地实现渲染渐变，但为了实现效果必须找到渐变的平均颜色并将渐变渲染为等于平均颜色的纯色图像。

如果第一个和最后一个终止颜色之间的距离为零（或由于实现限制而舍入为零），则必须找到渐变的具有相同数目和终止颜色的平均颜色，但是对于第一和最后一个终止颜色，则必须停止任意非零距离，剩下的颜色在它们之间保持相等的间隔。然后，它必须将梯度渲染为与平均颜色相等的纯色图像。

如果重复径向渐变的结束形状的宽度为非零且高度为零，或者接近于零，则在知道输出设备的物理分辨率不足以忠实地实现渲染渐变，则实现必须找到渐变的平均颜色，并将渐变渲染为等于平均颜色的纯色图像。

我们可以通过以下步骤来查找渐变的平均颜色：

1、将列表定义为RGBA颜色的初始空列表，将总长度定义为第一个和最后一个颜色之间的距离。

2、对于每对相邻的色块，将重量定义为两个色标之间距离的一半除以总长度。添加两个条目列表，第一个通过表示RGBA中第一个颜色停止的颜色获得，并按重量缩放所有组件，第二个通过第二个颜色停止以相同方式获得。

3、按顺序对列表的条目求和以生成平均颜色，并将其返回。

总结：以上就是本篇文章所介绍的全部内容，希望能对大家的学习有所帮助。

以上就是css3的重复渐变是什么？如何使用？（代码示例）的详细内容，更多请关注亿速云其它相关文章！