7：渐变(背景-属性)-1.1.3 线性渐变

最新推荐文章于 2025-05-31 11:59:13 发布

liu1992452008

最新推荐文章于 2025-05-31 11:59:13 发布

阅读量451

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3

本文链接：https://blog.youkuaiyun.com/liu1992452008/article/details/75305066

CSS3 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了CSS3中的线性渐变特性，包括如何设置渐变的方向、颜色及透明度，同时还展示了如何实现重复颜色的渐变效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

7：渐变(背景-属性)

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

1.1.1 线性渐变

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果，如下图是从黄色渐变到绿色。

1、必要的元素：

a、方向

b、起始色

c、终止色

2、关于方向

设置渐变方向，可以用关键字如to top、to right，也可以用角度（正负值均可）如45deg、-90deg等，当以角度做为参数时，可参照下图来使用，0deg从下往上，90deg从左向右，进而可以推算出180deg从上向下。

/* 默认是从上到下的渐变*/

#grad {

height: 100px;

background: linear-gradient(red,blue);

}

/* 从左到右的渐变*/

#right-grad {

margin-top: 50px;

height: 100px;

background:linear-gradient(to right, red, blue);

}

/* 从左上角到右下角*/

#angles-grad {

margin-top: 50px;

height: 100px;

background:linear-gradient(to bottom right, red, green);

}

/* 多种颜色的渐变*/

#colorful-grad {

margin-top: 50px;

height: 100px;

background:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

}

/* 带透明度渐变*/

#transparency-grad {

margin-top: 50px;

height: 100px;

background:linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 0, 1));

}

/* 重复颜色的渐变*/

#repeat-grad {

margin-top: 50px;

height: 100px;

/*表示百分之10的地方是红色，百分之30的地方是绿色*/

background: linear-gradient(toright, red 10%, green 30%);

****相关代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*线性渐变：linear-gradient  1：方向（to 方向单词组合或者角度）2：起始的颜色 3：终止的颜色        */
        
        div {
            margin-bottom: 30px;
        }
        
        .grad {
            height: 100px;
            background: linear-gradient( yellow, green);
        }
        
        .right-grad {
            height: 100px;
            background: linear-gradient(to right, yellow, green);
        }
        
        .angle-grad {
            height: 100px;
            background: linear-gradient(to right bottom, yellow, green);
        }
        
        .colorful-grad {
            height: 100px;
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        }
        
        .transparency-grad {
            height: 100px;
            background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 0, 1));
        }
        
        .repeat-grad {
            height: 100px;
            background: linear-gradient(to right, red 15%, green 50%);
        }
    </style>
</head>
<div class="grad">普通线性渐变,从上到下，默认是从上倒下</div>
<div class="right-grad">从左到右渐变</div>

<div class="angle-grad">从左上角到右下角</div>
<div class="colorful-grad">多种颜色的渐变</div>
<div class="transparency-grad">带透明度的渐变</div>
<div class="repeat-grad">重复颜色的渐变</div>

<body>

</body>

</html>

相关效果