<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
#div1 {
width: 500px;
height: 500px;
/* 设置背景的渐变色
渐变可以设置一些复杂的颜色，可以实现从一个颜色向其他颜色过渡的效果
渐变通过background-image来设置
线型渐变，颜色沿着一条直线发生变化
linear-gradient( )
linear-gradient(red,yellow)红色开头，黄色在结尾，中间是过渡区域
现象渐变的开头，我们可以指定一个渐变方向
to left
to right
to bottom
to top
deg表示度数
*/
/*
background-image: linear-gradient(to left, yellow, chartreuse);
可以同时指定多个颜色
background-image: linear-gradient(red, blue, green, yellow);
px可以设置颜色在元素中起始的一个位置，比如0px-400px中间的部分就是过渡区域
background-image: linear-gradient(red 0px, blue 400px);
*/
}
</style>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具