css中的渐变

最新推荐文章于 2025-05-30 13:14:14 发布

azkhx

最新推荐文章于 2025-05-30 13:14:14 发布

阅读量594

点赞数 3

CC 4.0 BY-SA版权

文章标签： css 前端 html css3

本文链接：https://blog.youkuaiyun.com/azkhx/article/details/132376925

本文详细介绍了CSS3中的线性渐变、径向渐变以及重复性渐变的概念、语法和注意事项，通过HTML示例展示了如何在网页中实现这些效果。

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

一、渐变

1.1 渐变的概念

1、简单介绍：CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

就是从一个颜色到其他颜色的过渡，很多的颜色交织在一起，形成比较炫酷的效果。

1.2 线性渐变

概念：线性渐变是从“一个方向”向“另一个方向”的颜色渐变

1.语法

background-image:linear-gradient(to 方向,第一个颜色值,第二个颜色值,...)

2.注意点:

方向默认是从上面到下面，也就是to bottom

方向的取值除了上下左右（top，bottom，left，right）的常规取值外还可以使用到角的取值，例如：（to right top）

方向的取值可以直接使用角度。例如：（60deg）

可以更改渐变颜色值的位置----在颜色值后面加上百分比数字。例如：（red 20%）；

3.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            float: left;
            margin: 20px;
        }
        /* 从一个边到另一个边 */
        div:nth-child(1){
            /* 默认方向就是从上面到下面 */
            background-image: linear-gradient(to bottom, red, yellow);
            /* background: linear-gradient(red, yellow); */
        }
        div:nth-child(2){
            background-image: linear-gradient(to top, red, yellow);
        }
        div:nth-child(3){
            background-image: linear-gradient(to left, red, yellow);
        }
        div:nth-child(4){
            background-image: linear-gradient(to right, red, yellow);
        }

        /* 从一个角到另一个角 */
        div:nth-child(5){
            background-image: linear-gradient(to right top,red, blue);
        }
        div:nth-child(6){
            background-image: linear-gradient(to right bottom,red, blue);
        }
        div:nth-child(7){
            background-image: linear-gradient(to left top,red, blue);
        }
        div:nth-child(8){
            background-image: linear-gradient(to left bottom,red, blue);
        }

        /* 直接使用角度，deg表示的就是角度。可以使用角度把上面两种效果都可以实现 */
        div:nth-child(9){
            background-image: linear-gradient(60deg, red, blue);
        }

        /* 指定渐变颜色值的位置 */
        div:nth-child(10){
            height: 50px;
            background-image: linear-gradient(to right, red 20%, green);
        }
    </style>
</head>
<body>
    <!--
        渐变
        + 就是从一个颜色到其他颜色的过渡，很多的颜色交织在一起，形成比较炫酷的效果
        + 线性渐变
          => 就是从一个方向到另一个方向的渐变
          => 工作中用的比较多
    -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>

    <div></div>
</body>
</html>

4.运行效果

在这里插入图片描述

1.3 径向渐变

1.语法

background-image: radial-gradient(渐变的图形，横坐标纵坐标，颜色1，颜色2，...)

2.注意点

指定径向渐变的图形有两种取值：circle（圆）、ellipse（椭圆）

指定渐变图形的时候，如果容器长宽是一样的，那么使用椭圆和圆的效果是一样的。

指定坐标属性的时候中间不需要打，（逗号）隔开

3.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid;
            float: left;
            margin: 30px;
        }
        div:nth-child(1){
            background-image: radial-gradient(red, yellow, green);
        }
        div:nth-child(2){
            background-image: radial-gradient(100px 100px, red, yellow, green);
        }
        div:nth-child(3){
            background-image: radial-gradient(red 10%, yellow 30%, green);
        }


        /* 指定径向渐变的图形（圆、椭圆） */
        div:nth-child(4){
            width: 400px;
            /* 注意点：能不能变成椭圆跟容器的形状有关 */
            background-image: radial-gradient(ellipse, red, yellow, green);
        }
        div:nth-child(5){
            width: 400px;
            background-image: radial-gradient(circle, red, yellow, green);
        }
    </style>
</head>
<body>
   
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
</body>
</html>

4.效果图

在这里插入图片描述

1.4 重复性渐变

1.语法

重复性线性渐变:background-image: repeating-linear-gradient;

重复性径向渐变:background-image: repeating-radial-gradient

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:nth-child(1){
            width: 50px;
            height: 300px;
            border: 1px solid;
            margin: 50px auto;
            background-image: repeating-linear-gradient(red 10%, yellow 20%, green 30%);
        }
        div:nth-child(2){
            width: 300px;
            height: 300px;
            border: 1px solid;
            margin: 50px auto;
            background-image: repeating-radial-gradient(red 10%, yellow 20%, green 30%);
        }
    </style>
</head>
<body>
    <!-- 重复性线性渐变 -->
    <div></div>
    
    <!-- 重复性径向渐变 -->
    <div></div>
</body>
</html>

3.效果如下：

在这里插入图片描述