用box-shadow属性去控制云朵的形状
来源：2-14 项目作业
键盘f11
2020-05-16 20:53:36
老师，您好，我想咨询一下关于云朵形状的问题
<!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{
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;
left: 400px;
top: 150px;
}
上述为我写的代码，主要针对于云朵形状，那我这边简单的查找了一些资料，云朵可以先用一个圆（width height大概50px就可以），剩下的圆可以通过box-shadow阴影来叠加实现，我看了一下整个云朵有6个圆，但是box-shadow中只有五个圆，我简单的操作了一下，最左边的这个圆操作不了？这是因为什么原因呢？难道是因为这个是底部的圆么？或者是基础的圆？还是说box-shadow中少添加了一个圆属性呢？
1回答
-
同学你好，最左边的圆就是div本身绘制的圆，div自身是有宽高以及圆角的，所以绘制出了一个圆。如下通过不同颜色区分一下：
例如想要调整它的位置，因为它就是div本身，其他的圆都是它的阴影，所以整体都会进行移动。同学做的云朵已经可以了，不用和效果图一模一样的哦。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题