使用纯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
指定了渐变的方向,即从左上角到右下角。red
和blue
则是渐变的起始颜色和结束颜色。
你可以将这段代码添加到你的CSS文件中,或者将它直接插入到HTML文件的<style>
标签内。然后,当你打开HTML文件时,你应该会看到一个具有线性渐变背景的页面。
如果你想尝试不同的渐变方向和颜色,只需相应地调整linear-gradient()
函数的参数即可。例如,你可以尝试将渐变方向改为to left
或45deg
,或者将颜色改为green
和yellow
等。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具