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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。