3-2 编程练习作业提交
来源：3-2 编程练习
MiMicccc
2020-09-09 23:44:59
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
/*此处写代码*/
div {
float: left;
margin: 0 20px;
text-align: center;
}
div.linear,div.zy,div.dj {
width: 100px;
height: 100px;
}
div > .linear {
background: -webkit-linear-gradient(yellow,red);
background: -moz-linear-gradient(yellow,red);
background: -o-linear-gradient(yellow,red);
background: linear-gradient(yellow,red);
}
div > .zy {
background: -webkit-linear-gradient( left,yellow,red);
background: -moz-linear-gradient( right,yellow,red);
background: -o-linear-gradient( right,yellow,red);
background: linear-gradient( to right,yellow,red);
}
div > .dj {
background: -webkit-linear-gradient( top left,red,yellow);
background: -moz-linear-gradient( right bottom,red,yellow);
background: -o-linear-gradient( right bottom,red,yellow);
background: linear-gradient( to right bottom,red,yellow);
}
</style>
</head>
<body>
<!--此处写代码-->
<div>
<p>上下方向渐变</p>
<div class="linear"></div>
</div>
<div>
<p>左右方向渐变</p>
<div class="zy"></div>
</div>
<div>
<p>对角方向渐变</p>
<div class="dj"></div>
</div>
</html>写回答
1回答
-
好帮手慕鹤
2020-09-10
同学你好，代码效果虽然实现了，但是代码中有一个小问题。
在代码中丢失了</body>，如下：
效果没有出现问题的原因是，浏览器自动把结束标签补齐了。
如果帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题