老师帮忙检查一下

来源:3-2 编程练习

慕娘6107863

2019-12-26 10:28:36

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

div{

width: 300px;

height: 200px;

text-align: center;

display:inline-block;

}

.div1{

background: -webkit-linear-gradient(yellow,red);

background:    -moz-linear-gradient(yellow,red);

background:      -o-linear-gradient(yellow,red);

background:         linear-gradient(yellow,red);

}

.div2{

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);

}

.div3{

background: -webkit-linear-gradient(left top,yellow,red);

background:    -moz-linear-gradient(right bottom, yellow,red);

background:      -o-linear-gradient(right bottom,yellow,red);

background:         linear-gradient(to right bottom,yellow,red);

}

</style> 

</head>

<body>

<div>上下方向渐变<div class="div1" ></div></div>

<div>左右方向渐变<div class="div2"></div></div>

<div>对角线渐变<div class="div3"></div></div>

</body>

</html>


写回答

1回答

好帮手慕言

2019-12-26

同学你好,使用同学提供的代码测试,最后一个元素的渐变是不符合效果图的,同学的编程题效果如下:
http://img.mukewang.com/climg/5e0431a009dddeef03810258.jpg

效果图的左上角是红色,同学的是黄色,可以参考下方修改:
http://img.mukewang.com/climg/5e0431ce096285b809850332.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程