CSS repeating-linear-gradient()用法及代碼示例

repeating-linear-gradient()函數是CSS中的內置函數，用於重複線性漸變。

用法:

background-image:repeating-linear-gradient( angle | to side-or-corner, color-stop1,
color-stop2, ...);

參數：該函數接受許多下麵列出的參數：

angle:此參數用於保存漸變的方向角。其值介於0到360度之間。默認情況下，其值為180度。
side-or-corner：此參數用於定義漸變線的starting-point的位置。它由兩個關鍵字組成：第一個關鍵字指示水平邊(左側或右側)，第二個關鍵字指示垂直邊(頂部或底部)。順序無關緊要，每個關鍵字都是可選的。
color-stop1，color-stop2…：此參數用於保留顏色值及其後的可選停止位置。

以下示例說明了CSS中的repeating-linear-gradient()函數：

範例1：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>repeating-linear-gradient() Function</title>  
        <style>  
            #main {  
                height:200px;  
                background-color:white;  
                background-image:repeating-linear-gradient(#090,  
                                        #fff 10%, #2a4f32 20%);  
            }  
            .gfg {  
                text-align:center;  
                font-size:40px;  
                font-weight:bold;  
                padding-top:80px;  
            }  
            .geeks {  
                font-size:17px;  
                text-align:center;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="main">  
            <div class = "gfg">GeeksforGeeks</div>  
            <div class = "geeks">A computer science portal for geeks</div>  
        </div>  
    </body>  
</html>

輸出：
repeating linear gradient

範例2：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>repeating-linear-gradient() Function</title>  
        <style>  
            #main {  
                height:200px;  
                background-color:white;  
                background-image:repeating-linear-gradient(45deg,  
                blue, green 7%, white 10%);  
            }  
            .gfg {  
                text-align:center;  
                font-size:40px;  
                font-weight:bold;  
                padding-top:80px;  
            }  
            .geeks {  
                font-size:17px;  
                text-align:center;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="main">  
            <div class = "gfg">GeeksforGeeks</div>  
            <div class = "geeks">A computer science portal for geeks</div>  
        </div>  
    </body>  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自Mahadev99大神的英文原創作品 CSS | repeating-linear-gradient() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。