关于云朵中box-shadow中每个阴影层在F12中的位置
来源：2-14 项目作业
键盘f11
2020-05-16 23:08:58
<!DOCTYPE html>
<html>
<head>
<title>tuzi</title>
<link rel="stylesheet" type="text/css" href="css/tuzi.css">
</head>
<body>
<div class="zong">
<div class="tian">
<div class="yun1"></div>
<div class="yun2"></div>
<div class="yun3"></div>
<div class="yun4"></div>
<div class="yun5"></div>
</div>
<div class="caodi">
</div>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
.zong{
width: 100%;
height: 610px;
margin: 0 auto;
}
.tian{
width: 100%;
height: 60%;
background:linear-gradient(180deg, rgb(196, 228, 253) 0%, white 100%);
position: relative;
}
.caodi{
width: 100%;
height: 40%;
background: linear-gradient(0deg, rgb(148, 190, 89) 0% , white 100%);
}
.yun1, .yun2, .yun3,.yun4,.yun5{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
box-shadow: #fff 24px -14px 0 -3px, #fff 64px -12px 0 10px, #fff 30px 10px, #fff 60px 15px 0 -10px, #fff 85px 5px 0 -5px;
position: absolute;
}
.yun1{
left: 400px;
top: 150px;
}
.yun2{
left: 50px;
top: 150px;
}
.yun3{
left: 150px;
top: 150px;
}
.yun4{
left: 150px;
top: 100px;
}
.yun5{
left: 300px;
top: 150px;
}
老师，您好，上述为我写的代码，想咨询一下，box-shadow中有五个阴影层，那我想咨询一下，如何知道对应的阴影层呢？或者说我在写阴影层之前，我没有一个概念，1.这个阴影层五个是如何排布的？我简单的看了一下每个的位置，是不是根据父类元素（position：relative）的位置，按照逆时针的顺序排布开来呢？ 2.我有一个想法就是说，现在云朵的阴影个数是5个，那如果后续阴影层是10个或者是20个？有什么窍门或者是什么备注的形式么？便于元素的维护和图形上阴影层的查找？
1回答
-
同学你好，这个没有顺序可言哦，是根据你自己设置的阴影位置，即水平阴影的位置和垂直阴影的位置。如果想要知道或者调整位置，需要按F12自己一点一点的调整，例如如下：
按键盘上下箭头或者鼠标滚轮调整数值，阴影会根据你调整的数值显示不同的位置。
另外，在实际开发中。图形一般使用图片，不会使用css3设置，所以像同学所说的情况在实际开发中很难遇到。css3绘制图形这一块，就简单的练习了解一下即可哦。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题