老师，请检查，感觉记不住呀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
float: left;
text-align: center;
}
.div1,
.div2,
.div3 {
width: 300px;
height: 300px;
margin: 10px;
}
.div1 {
-webkit-background: linear-gradient(yellow, red);
-moz-background: linear-gradient(yellow, red);
-o-background: linear-gradient(yellow, red);
background: linear-gradient(yellow, red);
}
.div2 {
-webkit-background: linear-gradient(left, yellow, red);
-moz-background: linear-gradient(right, yellow, red);
-o-background: linear-gradient(right, yellow, red);
background: linear-gradient(to right, yellow, red);
}
.div3 {
-webkit-background: linear-gradient(left top, red, yellow);
-moz-background: linear-gradient(right bottom, red, yellow);
-o-background: linear-gradient(right bottom, red, yellow);
background: linear-gradient(to right bottom, red, yellow);
}
</style>
</head>
<body>
<div>
<p>上下渐变</p>
<div class="div1"></div>
</div>
<div>
<p>左右渐变</p>
<div class="div2"></div>
</div>
<div>
<p>对角渐变</p>
<div class="div3"></div>
</div>
</body>
</html>
正在回答
同学你好，效果是正确的。刚接触新知识，记不住也是正常现象，同学课下要反复的练习，代码敲的多了，自然也就记住了，不要灰心呀，继续加油，冲鸭~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星