关于这个先后的问题，请老师解答一下！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content{width:500px;height: 300px;border: 1px solid black;}
.box1,.box2,.box3{width: 100px;height: 100px;border: 1px solid blue;}
.box{float: left;padding-left: 20px;}
.box1{background: linear-gradient(yellow, red);
background: -webkit-linear-gradient(yellow,red);
background: -moz-linear-gradient(yellow,red);
background: -o-linear-gradient(yellow,red);}
.box2{
background:-webkit-linear-gradient(left, yellow,red);
background: -moz-linear-gradient(left, yellow,red);
background: -o-linear-gradient(right yellow,red);
background: linear-gradient(to right, yellow, red);}
.box3{background: linear-gradient(to right bottom, red,yellow);
background:-webkit-linear-gradient(left top, red,yellow);
background: -moz-linear-gradient(left top, red,yellow);
background: -o-linear-gradient(right bottom, red,yellow);}
</style>
</head>
<body>
<div class="content">
<div class="box">
<span>上下方向渐变</span>
<div class="box1"></div>
</div>
<div class="box">
<span>左右方向渐变</span>
<div class="box2"></div>
</div>
<div class="box">
<span>对角线方向渐变</span>
<div class="box3"></div>
</div>
</div>
</body>
</html>
正在回答
同学你好，
chrome高版本是可以直接支持linear， 同时也支持-webkit-linear-gradient属性值， 添加前缀的意义是如果浏览器不支持linear属性， 再使用前缀兼容属性哦， 因为chrome支持linear， 所以最终使用的是linear
规定de 渐变角度是不一样的，与浏览器本身有关， 没有为什么哦， 我们记住即可
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星