3-2作业提交
来源:3-2 编程练习
qq_慕斯7214945
2020-08-24 21:32:11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
/*此处写代码*/
div{
width: 200px;
height: 200px;
}
div.one,
div.two,
div.three{
float: left;
margin-right: 20px;
}
div.one div{
background:-webkit-linear-gradient(yellow,red);
background: -moz-linear-gradient(yellow,red);
background: -o-linear-gradient(yellow,red);
background: linear-gradient(yellow,red);
}
div.two div{
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.three div{
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 class="one">
<p>上下方向渐变</p>
<div></div>
</div>
<div class="two">
<p>左右方向渐变</p>
<div></div>
</div>
<div class="three">
<p>对角方向渐变</p>
<div></div>
</div>
</html>
1回答
好帮手慕言
2020-08-25
同学你好,第三个div元素是从左上角到右下角发生渐变,颜色由红色变为黄色,测试同学的代码,效果是黄色变为红色,颜色位置可以调换一下
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
相似问题