CSS3 渐变详解-CSDN博客

本文介绍了CSS3的渐变技术，包括线性渐变、角度渐变、径向渐变、颜色节点分布、透明度渐变和重复渐变。线性渐变涉及方向和颜色变化，角度渐变允许指定角度，径向渐变关注形状和颜色，颜色节点分布解释了百分比如何影响颜色过渡，透明度渐变允许平滑过渡到透明，而重复渐变能按指定百分比重复颜色图案。

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

线性渐变

渐变分成线性渐变和径向渐变两种

线性渐变的两大要素

渐变方向，结束方向；默认从上向下
渐变的起始色和终止色，至少两种；可以使用合法的颜色值
线性渐变语法：background: linear-gradient(to bottom, red, blue);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 300px; height: 300px; 
            margin: 10px auto; border: 1px solid #000;
            /* 从上到下线性渐变，红色开始，蓝色结束 */
            background: linear-gradient(to bottom, red, blue);
             /* 从左到右线性渐变，红色开始，蓝色结束 */
            background: linear-gradient(to right, red, blue);
              /* 从右上到左下线性渐变，红色开始，橙色结束 */
            background: linear-gradient(to left bottom, red, blue, orange);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

角度渐变

角度渐变属于线性渐变的一种方法；角度使用度数加deg表示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 300px; height: 300px; 
            margin: 10px auto; border: 1px solid #000;
            background: linear-gradient(180deg, red, orange);
            background: linear-gradient(0deg, red, orange);
            background: linear-gradient(90deg, red, orange);
            background: linear-gradient(270deg, red, orange);
            background: linear-gradient(135deg, red, orange);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

径向渐变

径向渐变的两大要素

渐变形状，默认为椭圆形
渐变的起始色和终止色，至少两种；可以使用合法的颜色值
径向渐变语法：background: radial-gradient(circle, red, yellow, orange);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 600px; height: 300px; 
            margin: 10px auto; border: 1px solid #000;
            /* 椭圆形径向渐变 */
            /* background: radial-gradient(ellipse, red, yellow, orange); */
            /* 圆形径向渐变 */
            background: radial-gradient(circle, red, yellow, orange);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

颜色节点分布

百分比渐变的区域与二值之间
第一个值大于0%，前面的颜色会默认为第一个颜色的纯色
最后一个值小于100%，后面的颜色会默认为最后一个颜色的纯色
不设置百分比时，会默认将所有颜色的值等额分开
如设置 “yellow 20%”：即表示黄色从20%开始向两侧渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 1000px; height: 100px; 
            margin: 10px auto; border: 1px solid #000;
            /* background: radial-gradient(circle, white, yellow 30%, orange 80%, red); */
            background: linear-gradient(90deg, white 5%, yellow 20%, orange 80%, red);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

透明度渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 1000px; height: 100px; 
            margin: 10px auto; border: 1px solid #000;
            background: linear-gradient(90deg, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

重复渐变

从左到右重复线性渐变，重复了2次
重复渐变最后一个颜色必须要设置一个百分比，表示占整个元素尺寸的百分比
通过这个百分比可以计算重复几次
重复渐变中的其他百分比，和颜色节点粉笔百分比相似，指单次所占的百分比尺寸
background: repeating-linear-gradient(90deg, red, yellow, green 50%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 1000px; height: 100px; 
            margin: 10px 10px; border: 1px solid #000;
            background: repeating-linear-gradient(90deg, red, yellow, green 50%);
        }
       
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>