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

最新推荐文章于 2024-06-02 16:45:07 发布

爱睡觉的小馨

最新推荐文章于 2024-06-02 16:45:07 发布

阅读量1.3k

点赞数 1

分类专栏： HTML与CSS5网页设计

本文链接：https://blog.csdn.net/qq_45696288/article/details/108754128

版权

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

21 篇文章 7 订阅

订阅专栏

<!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>

在这里插入图片描述

爱睡觉的小馨

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML背景颜色的渐变与多种颜色的混合

<!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{
复制链接

扫一扫