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

linear-gradient()函數是CSS中的內置函數，用於將線性漸變設置為背景圖像。

用法:

background-image:linear-gradient( direction, color1, color2, ... )

參數：此函數接受一個方向參數和許多顏色參數，如下所示：

direction:此參數用於定義起點和方向以及漸變效果。
color1，color2，…：此參數用於保留顏色值及其後的可選停止位置。

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

<!DOCTYPE html> 
<html> 
    <head> 
        <title>linear-gradient function</title> 
        <style> 
        .gradient { 
            height:100px; 
            background-image:linear-gradient(green, yellow, blue); 
            Text-align:center; 
            padding-top:40px; 
            font-size:40px; 
            color:white; 
            font-weight:bold; 
        } 
        h2 { 
            text-align:center; 
        } 
        </style> 
    </head> 
    <body> 
        <h2>linear-gradient:Top to Bottom property</h1> 
        <div class="gradient">GeeksforGeeks</div> 
    </body> 
</html>

輸出：

範例2：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>linear-gradient function</title> 
        <style> 
        .gradient { 
            height:100px; 
            background-image:linear-gradient(to left, green, yellow, blue); 
            Text-align:center; 
            padding-top:40px; 
            font-size:40px; 
            color:white; 
            font-weight:bold; 
        } 
        h2 { 
            text-align:center; 
        } 
        </style> 
    </head> 
    <body> 
        <h2>linear-gradient:Right to Left property</h1> 
        <div class="gradient">GeeksforGeeks</div> 
    </body> 
</html>

輸出：

相關用法

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