为什么我这是这个样子的呢？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>渐变的应用</title>
<style>
*{margin: 0;padding: 0;}
div{
width: 800px;
height: 800px;
background-color: #abcdef;
background-size: 100px 100px;
background-image: -webkit-linear-gradient(45deg,red 25%,transparent 25%),
                 -webkit-linear-gradient(-45deg,red 25%,transparent 25%),
                 -webkit-linear-gradient(45deg,transparent 75%,red 75%),
                 -webkit-linear-gradient(-45deg,transparent 75%,red 75%);
background-image: -moz-linear-gradient(45deg,red 25%,transparent 25%),
                 -moz-linear-gradient(-45deg,red 25%,transparent 25%),
                 -moz-linear-gradient(45deg,transparent 75%,red 75%),
                 -moz-linear-gradient(-45deg,transparent 75%,red 75%);
background-image: -o-linear-gradient(45deg,red 25%,transparent 25%),
                 -o-linear-gradient(-45deg,red 25%,transparent 25%),
                 -o-linear-gradient(45deg,transparent 75%,red 75%),
                 -o-linear-gradient(-45deg,transparent 75%,red 75%);
background-image: linear-gradient(45deg,red 25%,transparent 25%),
                 linear-gradient(-45deg,red 25%,transparent 25%),
                 linear-gradient(45deg,transparent 75%,red 75%),
                 linear-gradient(-45deg,transparent 75%,red 75%);                                                      
}
</style>
</head>
<body>

<div></div>
</body>
</html>

慕斯卡5217687 2018-04-18

源自：CSS3背景与渐变 3-24 渐变应用

收起

1回答

好帮手慕星星 2018-04-18 14:25:41

测试了你的代码，效果是这样的：

你自己测试的时候是有什么问题吗？

收起回答

提问者慕斯卡5217687 #1

测试的时候不是这样的后来做习题的时候显示是对的，不知道咋回事

2018-04-18 15:39:46
Miss路回复提问者慕斯卡5217687 #2

可能是你不小心弄到了哪里，现在能正常显示就好。但是还是要去理解自己写的是什么意思，这样自己也能准确的去查找原因。祝学习愉快！

2018-04-18 16:40:58