repeating 路由_CSS中带有示例的repeating-linear-gradient（）函数

repeating 路由

Introduction:

介绍：

So far, we have learned so many functions but learning never gets enough, therefore as a good developer, we must learn as many functions as we can and know their behavior with the help of practical implementations. But why do we need functions? How do they help us? Well, the answers to those questions will amaze you. There are numerous benefits of using functions while developing a website or a web page. Some of those benefits will be discussed here, so buckle up and grab your notes to explore the usage of functions.

到目前为止，我们已经学习了很多函数，但是学习却远远不够，因此，作为一个好的开发人员，我们必须尽可能多地学习函数，并在实际实现的帮助下了解它们的行为。但是为什么我们需要功能呢？他们如何帮助我们？好吧，这些问题的答案会让您赞叹不已。在开发网站或网页时使用功能有很多好处。其中一些好处将在这里讨论，因此请系好安全带并抓紧笔记，以探索功能的用法。

Some very good web developers use functions daily while developing a website or a web page. Functions help in reducing your line of codes, for example, if you take rgba() function, this function helps you in specifying the colors of the elements. So, you don't need to specify the colors of each element individually. Now, that your line of codes will be reduced this, in turn, will help in space optimization of the code. Therefore, if you wish to be a good professional developer, try to learn as many functions as you can. Now, that we have discussed some of the crucial benefits of the functions, let us move forward and talk about one such function known as repeating-linear-gradient() function in CSS.

一些非常优秀的Web开发人员每天在开发网站或网页时都会使用功能。函数有助于减少代码行，例如，如果您使用rgba()函数，则此函数可帮助您指定元素的颜色。因此，您无需分别指定每个元素的颜色。现在，您的代码行将减少，从而有助于代码的空间优化。因此，如果您想成为一名优秀的专业开发人员，请尝试学习尽可能多的功能。现在，我们已经讨论了这些函数的一些关键好处，让我们继续前进，并讨论一下CSS中称为repeating-linear-gradient()函数的这种函数。

Definition:

定义：

You might be aware of a linear-gradient function() as it is widely used for developing a website or web page. Well, if you are not familiar with this function, then don’t worry as this article will tell you all you need to know about this function. Let us start with a formal definition.

您可能已经意识到线性梯度函数()，因为它广泛用于开发网站或网页。好吧，如果您不熟悉此功能，那么不要担心，因为本文将告诉您所有需要了解的有关此功能的信息。让我们从一个正式的定义开始。

repeating-linear-gradient() function has a very simple behavior, it helps in creating an image that comprises the progressive transition of two or more colors with their percentage, therefore, as result, we get a gradient which is a newly formed image with multiple linear-gradients. Not that tough right? Well, let us have a look at the syntax for a better understanding:

repeating-linear-gradient()函数的行为非常简单，它有助于创建包含两种或多种颜色及其百分比的渐进过渡的图像，因此，我们得到的梯度是新形成的图像，具有多个线性渐变。不是那么艰难吧？好吧，让我们看一下语法以获得更好的理解：

Syntax:

句法：

    element{
background: repeating-linear-gradient( <angle> | to <side-or-corner>, <color-stop-list>;
}

Let's look at the values used in this syntax,

让我们看一下此语法中使用的值，

<angle>: It is used to set the angle of the gradient line that indicates the direction of the gradient.
<angle> ：用于设置指示渐变方向的渐变线角度。
<side-or-corner>: It is used to denote the position of the gradient line's starting point. It consists of the word to and has up to two keywords: the horizontal side (left or right), and on the vertical side (top or bottom). If unspecified, it defaults to 'to the bottom'.
<side-or-corner> ：用于表示渐变线起点的位置。它由单词to和最多具有两个关键字组成：水平侧(左侧或右侧)和垂直侧(顶部或底部)。 如果未指定，则默认为'to the bottom' 。
<color-stop-list>: It is used to store the list of color values followed by its optional stop position.
<color-stop-list> ：用于存储颜色值列表及其后的可选停止位置。

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
font-size: 40px;
text-align: center;
background-image: repeating-linear-gradient(pink, red 10%, yellow 40%);
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<div>This is repeating-linear-gradient function.</div>
</body>
</html>

Output

输出量

CSS | repeating-linear-gradient() function

In the above example, three colors are used inside the repeating-linear-gradient() function.

在上面的示例中， repeating-linear-gradient()函数内部使用了三种颜色。

Conclusion:

结论：

Therefore, in a nutshell, it can be said that learning about functions is a very good practice. Besides, it marks the trait of a good developer who has knowledge about web development coding.

因此，简而言之，可以说学习功能是一个很好的实践。此外，它标志着一个具有Web开发编码知识的优秀开发人员的特征。

That was all about linear-gradient function in CSS. So, go ahead and start implementing this function right away. It is a very interesting function that would help in styling your website or web page profoundly.

这就是CSS中的线性梯度函数。因此，继续并立即开始实现此功能。这是一个非常有趣的功能，可以帮助您深刻地设计网站或网页的样式。