这样可以吗?3-2
来源:3-2 编程练习
慕言_7946275
2019-07-23 14:20:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
/*此处写代码*/
*{padding:0;
margin:0;
}
div{width:120px;
height:120px;
float:left;
margin-right:30px;
}
p{text-align:center;
margin:20px auto;
font-size:14px;
font-weight:bold;
}
.box1{background:linear-gradient(yellow,red);}
.box2{background:linear-gradient(to right,yellow,red);}
.box3{background:linear-gradient(to right bottom,red,yellow);}
</style>
</head>
<body>
<div>
<p>上下方向渐变</p>
<div class="box1"></div>
</div>
<div>
<p>左右方向渐变</p>
<div class="box2"></div>
</div>
<div>
<p>对角方向渐变</p>
<div class="box3"></div>
</div>
<!--此处写代码-->
</html>1回答
樱桃小胖子
2019-07-23
效果实现的是可以的,代码也很简洁,棒棒哒,继续加油哦!
相似问题