请帮忙查看下，谢谢
来源：3-2 编程练习
慕UI9243256
2019-09-09 09:00:07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
/*此处写代码*/>
div{
width: 300px;
height: 300px;
border: 1 solid black;
display: inline-block;
}
/* 第一个div元素是从上向下发生渐变，由黄色到红色 */
div:nth-child(1){
-webkit-background:linear-gradient(yellow,red);
-moz-background:linear-gradient(yellow,red);
-o-backgroound:linear-gradient(yellow,red);
background:linear-gradient(yellow,red);
}
/* 第二个div元素是从左向右发生渐变，由黄色到红色 */
div:nth-child(2){
-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);
}
/* 第三个div元素是从左上角到右下角发生渐变，由红色到黄色 */
div:nth-child(3){
-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></div>
<div></div>
<div></div>
<div></div>
</html>兼容的不同浏览器的代码，方向有时没法记住。我使用vscode软件编辑，请问是否有提示功能的插件或只能靠自我记忆力来巩固？
写回答
1回答
-
好帮手慕嘟嘟
2019-09-09
同学你好，
1，关于兼容性的写法，就是浏览器厂商的前缀，只要多写几遍就会记住的哦。
2，运行同学的代码。没有实现效果，原因是style标签的注释中多了一个>,应该去掉>。
修改如下：
效果：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题