老师帮忙看看，谢谢
来源：3-2 编程练习
慕后端8441795
2020-10-03 07:02:23
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
section{float: left;margin: 20px;text-align: center;}
section:first-of-type>div{width: 200px;height: 200px;
background: -webkit-linear-gradient(red, yellow);
background: -moz-linear-gradient(red, yellow);
background: -o-linear-gradient(red, yellow);
background: linear-gradient(red, yellow);}
section:nth-of-type(2) > div{width: 200px;height: 200px;
background: -webkit-linear-gradient( left,red, yellow);
background: -moz-linear-gradient( right,red, yellow);
background: -o-linear-gradient( right,red, yellow);
background: linear-gradient(to right,red, yellow);}
section:last-of-type > div{width: 200px;height: 200px;
background: -webkit-linear-gradient( left top, 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>
<section>从上到下<div ></div></section>
<section>从左到右<div ></div></section>
<section>从左上到右下<div ></div></section>
</body>
</html>
1回答
-
同学你好，实现的效果恰好与效果图相反了，效果图实现的效果是从黄色到红色的渐变，如下：
而代码中实现的是从红色到黄色的渐变：
根据效果图，如下修改：
第二个也要改一下渐变的顺序：
(上面带浏览器前缀的样式，老师就直接注释不一一修改了，同学自己改一下即可)
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题