线性渐变-色标点区域、线性渐变-重复渐变、径向渐变(放射性渐变)

正在修炼web的小芮

于 2022-07-27 16:23:48 发布

阅读量267

点赞数

分类专栏： css3 文章标签： html

本文链接：https://blog.csdn.net/m0_71814235/article/details/126017395

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

线性渐变-色标点区域

根据效果图，补充代码，实现元素的背景颜色在水平方向上发生渐变，其中：

0%-20%处，颜色是红色全透明

    <style>
             .box{
            width: 600px;
            height: 400px;
            margin: 20px auto 0;
            border: 1px solid black;
            /* 从左到右 拉线性渐变 */
            background-image: linear-gradient(to right,
            rgba(255,0,0,0)20%,
            rgb(203, 14, 250)50%,
            rgba(8, 224, 224, 0.7)90%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

效果

线性渐变-重复渐变

重复的线性渐变

语法：

background:repeating-linear-gradient(color1 length|percentage,color2 length|percentage,……);

    <style>
             .box{
            width: 600px;
            height: 400px;
            margin: 20px auto 0;
            border: 1px solid black;
            /* 重复渐变*/
            background-image: repeating-linear-gradient(to right,skyblue 0%,yellowgreen 50%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

效果

径向渐变(放射性渐变)

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

样式

    <style>
            .box{
            width: 600px;
            height: 400px;
            margin: 20px auto 20px;
            border: 1px solid black;

        }
        .box1{
            /* circle at left top 径向渐变 的起点在这个容器的左上角 */
            background-image: radial-gradient(circle at left top,pink,skyblue,yellowgreen,yellow);
           
        }
        .box2{
            background-image: radial-gradient(circle at left center,pink,skyblue,yellowgreen,yellow);
        }
        .box3{
            background-image: radial-gradient(circle at left bottom,pink,skyblue,yellowgreen,yellow);
        }
        .box4{
            background-image: radial-gradient(circle at left top,pink,skyblue,yellowgreen,yellow);
        }
        .box5{
            background-image: radial-gradient(circle at center center,pink,skyblue,yellowgreen,yellow);
        }
        .box6{
            background-image: radial-gradient(circle at center bottom,pink,skyblue,yellowgreen,yellow);
        }
        .box7{
            background-image: radial-gradient(circle at right top,pink,skyblue,yellowgreen,yellow);
        }
        .box8{
            background-image: radial-gradient(circle at right center,pink,skyblue,yellowgreen,yellow);
        }
        .box9{
            background-image: radial-gradient(circle at right bottom,pink,skyblue,yellowgreen,yellow);
        }
    </style>
</head>
<body>
    <div class="box box1"></div>

    <div class="box box2"></div>

    <div class="box box3"></div>

    <div class="box box4"></div>

    <div class="box box5"></div>

    <div class="box box6"></div>

    <div class="box box7"></div>

    <div class="box box8"></div>

    <div class="box box9"></div>
</body>

效果