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
輸出量
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中的線性梯度函數。 因此,繼續并立即開始實現此功能。 這是一個非常有趣的功能,可以幫助您深刻地設計網站或網頁的樣式。
翻譯自: https://www.includehelp.com/code-snippets/repeating-linear-gradient-function-with-example-in-css.aspx
repeating 路由
總結
以上是生活随笔為你收集整理的repeating 路由_CSS中带有示例的repeating-linear-gradient()函数的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: c语言用宏定义常量_使用宏定义常量以在C
- 下一篇: 预处理阶乘和阶乘逆元_计算数字的阶乘|