HTML背景颜色的渐变与多种颜色的混合

最新推荐文章于 2025-05-09 11:29:25 发布

原创最新推荐文章于 2025-05-09 11:29:25 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

HTML与CSS5网页设计专栏收录该内容

21 篇文章

订阅专栏

本文通过实例演示了如何使用CSS创建多种类型的渐变背景效果，包括线性渐变和径向渐变，并展示了如何调整角度、透明度以及实现重复渐变。

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

<!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: 50px;
                height: 50px;
               
            }

            /* 多种颜色 */
            div:nth-child(1){
                background:linear-gradient(to right, red , orange, yellow , green ,blue , purple)
            }

            div:nth-child(2){
                background: radial-gradient(red , yellow , green);
            }

            div:nth-child(3){
                background: radial-gradient(red 5%, yellow 15%, green 60%);
            }

            div:nth-child(4){
                background: radial-gradient(circle , red , yellow ,green);
            }

            div:nth-child(5){
                background: radial-gradient(closest-side at 60% 50% ,red , yellow , black);
            }

            div:nth-child(6){
                background: radial-gradient(farthest-side at 60% 55% , red , yellow , black);
            }
            
            div:nth-child(7){
                background: radial-gradient(red , yellow 10%, green 15%);
            }

            /* 角度问题 */
            div:nth-child(8){
                /* background: linear-gradient(#fff ,#333); */
                /* background: linear-gradient(90deg, #fff ,#333); */
                background: linear-gradient(45deg, #fff ,#f00 50%,#090);
            }

            /* 透明度 */
            div:nth-child(9){
                background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
            }

            /* 重复性渐变 */
            div:nth-child(10){
                background: linear-gradient(red , yellow 10% , green 20%);
            }

    </style>

</head>

<body>

    <div>

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

    </div>
    
</body>

</html>