关于CCS如何设置简单的渐变色（SEAN的日志）

最新推荐文章于 2023-07-07 16:05:03 发布

一瓶可乐丿

最新推荐文章于 2023-07-07 16:05:03 发布

阅读量340

点赞数 1

分类专栏： CCS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_46167829/article/details/117770398

版权

CCS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

上诉效果CSS代码


        body {
            margin: 0;
            width: 100%;
            height: 100vh;
        }

        .nephew1 {
            height: 25vh;
            width: 100%;
            background: linear-gradient(to right, #bdc3c7, #2c3e50);
            /* 简单的渐变色过渡 */
        }

        .nephew2 {
            height: 25vh;
            width: 100%;
            background: linear-gradient(to bottom, #2980b9, #ffffff);
            /* 可以调整过渡方向 */
        }

        .nephew3 {
            height: 25vh;
            width: 100%;
            background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d)
                /* 甚至可以设置多个颜色 */
        }

        .nephew4 {
            height: 25vh;
            width: 100%;
            background: linear-gradient(35deg, #bdc3c7, #2c3e50, rgba(206, 6, 6, 0.877));
            /* 调整角度可以实现斜向过渡 */
        }

<body>
    <div class="nephew1"></div>
    <div class="nephew2"></div>
    <div class="nephew3"></div>
    <div class="nephew4"></div>
</body>

一瓶可乐丿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于CCS如何设置简单的渐变色（SEAN的日志）

上诉效果CSS代码 body { margin: 0; width: 100%; height: 100vh; } .nephew1 { height: 25vh; width: 100%; background: linear-gradient(to right, #bdc3c7, #2c3e50); ..
复制链接

扫一扫

专栏目录