使用纯css画一个线性渐变的背景

要使用纯CSS创建一个线性渐变的背景,你可以使用linear-gradient()函数。以下是一个简单的例子,它创建了一个从左上角到右下角的线性渐变,颜色从红色过渡到蓝色:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right bottom, red, blue);
}

在这个例子中,linear-gradient()函数接受两个参数:渐变的方向和渐变的颜色。to right bottom指定了渐变的方向,即从左上角到右下角。redblue则是渐变的起始颜色和结束颜色。

你可以将这段代码添加到你的CSS文件中,或者将它直接插入到HTML文件的<style>标签内。然后,当你打开HTML文件时,你应该会看到一个具有线性渐变背景的页面。

如果你想尝试不同的渐变方向和颜色,只需相应地调整linear-gradient()函数的参数即可。例如,你可以尝试将渐变方向改为to left45deg,或者将颜色改为greenyellow等。

posted @   王铁柱6  阅读(45)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示