怎么用CSS+DIV制作背景线性渐变色

洪七公 · 发表于 2023-6-4 14:28:18

制作网页时，怎么用给DIV填充渐变的背景色呢？

1.新建一个网页文件，在body中添加一个<div></div>标签，然后给他一定CSS样式，【width: 300px;height: 200px;background:#ff0000；】我们可以看到填充了背景色为红色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.jianbianse {width: 300px;height: 200px;background:#ff0000;}
-->
</style>
</head>
<body>
<div class="jianbianse"></div>
</body>
</html>

复制代码

2.然后我们添加线性渐变代码【background: -webkit-linear-gradient(left,#ff5000,#ff9000) no-repeat;】，保存并刷新网页后，可以看到背景色已经是渐变色了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.jianbianse {width: 300px;height: 200px;background: -webkit-linear-gradient(left,#ff5000,#ff9000) no-repeat;}
-->
</style>
</head>
<body>
<div class="jianbianse"></div>
</body>
</html>

复制代码

3.我们来分析下这段代码的含义，括号中的【left】代表颜色是从左到有的渐变，两个颜色色值【#ff5000,#ff9000】代表从第一个色值渐变到另一个色值。

如果是从上到下渐变，只需要把【left】改成【top】就可以了。

从右向左渐变就是把方向改为【right】

从下向上相信大家也都明白了吧，改成【bottom】就可以啦。

如果我们想让渐变色改成45度斜着渐变，就把方向值改为【45deg】就可以咯，45就是45度，举一反三，想要其他的倾斜度渐变直接改数值就可以了哦。

		自动登录	找回密码
密码			会员注册

[CSS/Html] 怎么用CSS+DIV制作背景线性渐变色