CSS渐变背景色，这一篇就够了（附代码案列讲解）

最新推荐文章于 2024-09-22 09:02:33 发布

易点互联

最新推荐文章于 2024-09-22 09:02:33 发布

阅读量1.2w

点赞数 10

文章标签： css 渐变色前端

本文链接：https://blog.csdn.net/libol/article/details/139826552

版权

CSS渐变背景色是一种流行的网页设计技巧，它可以使网页元素的外观更加丰富和吸引人。渐变可以是线性的、径向的，甚至可以是复杂的多色渐变。本文将介绍如何使用CSS创建各种渐变背景色，并提供示例代码和效果展示。

线性渐变

线性渐变沿着一条直线从一种颜色过渡到另一种颜色。使用linear-gradient函数可以创建线性渐变。

示例代码：线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Gradient Background Examples</title>
    <style>
        /* 线性渐变 */
        .gradient-linear {
            width: 300px;
            height: 200px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="gradient-linear"></div>
</body>
</html>

效果展示：线性渐变

上述代码将创建一个从左到右的颜色渐变，从#ff7e5f过渡到#feb47b。

径向渐变

径向渐变从一个中心点向外辐射，颜色从中心向外变化。使用radial-gradient函数可以创建径向渐变。

示例代码：径向渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Gradient Background Examples</title>
    <style>        
        /* 径向渐变 */
        .gradient-radial {
            width: 300px;
            height: 200px;
            background: radial-gradient(circle, #ff7e5f, #feb47b);
            margin-bottom: 20px;
        }       
    </style>
</head>
<body>
    <div class="gradient-radial"></div>
</body>
</html>

效果展示：径向渐变

上述代码将创建一个从中心向外的圆形径向渐变，颜色从#ff7e5f过渡到#feb47b。

重复渐变

使用repeating-linear-gradient和repeating-radial-gradient可以创建重复的渐变效果。

示例代码：重复线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Gradient Background Examples</title>
    <style>
        /* 重复线性渐变 */
        .gradient-repeating-linear {
            width: 300px;
            height: 200px;
            background: repeating-linear-gradient(
                45deg,
                #ff7e5f,
                #ff7e5f 10px,
                #feb47b 10px,
                #feb47b 20px
            );
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="gradient-repeating-linear"></div>
</body>
</html>

效果展示：重复线性渐变

上述代码将创建一个沿45度角重复的线性渐变，每10像素重复一次颜色变化。

多色渐变

CSS3允许使用多个颜色值来创建更复杂的渐变效果。

示例代码：多色渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Gradient Background Examples</title>
    <style>
        /* 多色渐变 */
        .gradient-multicolor {
            width: 300px;
            height: 200px;
            background: linear-gradient(to bottom right, #ff7e5f, #feb47b, #6dd5ed, #ff758e);
        }
    </style>
</head>
<body>   
    <div class="gradient-multicolor"></div>
</body>
</html>