所以我主要尝试使用div和CSS创建云。我几乎没有div形状为圆形或斑点的想法，其想法是将它们合并为一个，以便它们看起来像云。
.cloud-body{
width:250px;
height:200px;
background: linear-gradient(blue,blueviolet);
margin-left: 30%;
margin-top:20%;
border-radius:50%;
}
.blob1{
width: 100px;
height: 100px;
background: blue;
border-radius:50%;
position:relative;
bottom: 200px;
left: 60%;
}
.blob2{
width: 200px;
height: 150px;
background: linear-gradient(blueviolet, blue);
border-radius:50%;
position:relative;
bottom: 200px;
left: 150px;
}
.blob3{
width: 200px;
height: 150px;
background: linear-gradient(blueviolet, blue);
border-radius:50%;
position:relative;
bottom: 400px;
left: 400px
}<div class="wrapper">
<div class="cloud-body"></div>
<div class="blob1"></div>
<div class="blob2"></div>
<div class="blob3"></div>
</div>但是它们看起来就像是彼此叠放的不同blob（如divs所期望的那样）。结合它们的方法是什么，或更具体地说，是使每种形状之间的边界消失？这是我正在处理的Codepen上pen for this的链接。
您可以考虑多个背景来创建具有一个元素的云。您可以轻松添加任意数量和大小的任意数量的圆/椭圆。一个半径值将给出一个圆，而两个值将给出一个椭圆
.cloud {
width:200px;
height:150px;
border-radius: 0 0 50px 50px;
background:
/* radius position / 2xradius*/
radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30% /70px 60px,
radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50% /100px 90px,
radial-gradient(50px ,blue 98%,transparent 100%) 100% 100%/100px 100px,
radial-gradient(40px ,blue 98%,transparent 100%) 0 100% /80px 80px,
/* base of the cloud */
linear-gradient(blue,blue) bottom/100% 40px;;
background-repeat:no-repeat;
}<div class="cloud"></div>如果要使用渐变作为着色，则可以使用mask完成。您只需使用先前在mask属性内定义的渐变即可：
.cloud {
width:200px;
height:150px;
border-radius: 0 0 50px 50px;
background:linear-gradient(60deg,red,blue);
-webkit-mask:
radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30% /70px 60px,
radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50% /100px 90px,
radial-gradient(50px ,blue 98%,transparent 100%) 100% 100%/100px 100px,
radial-gradient(40px ,blue 98%,transparent 100%) 0 100% /80px 80px,
linear-gradient(blue,blue) bottom/100% 40px;
mask:
radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30% /70px 60px,
radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50% /100px 90px,
radial-gradient(50px ,blue 98%,transparent 100%) 100% 100%/100px 100px,
radial-gradient(40px ,blue 98%,transparent 100%) 0 100% /80px 80px,
linear-gradient(blue,blue) bottom/100% 40px;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}<div class="cloud"></div>我建议使用此CSS云：
.cloud, .cloudshadow {
width: 350px; height: 120px;
background: #3498db;
border-radius: 100px;
position: relative;
margin: 150px 50px;
}
.cloud:after, .cloud:before, .cloudshadow:after, .cloudshadow:before {
content: '';
position: absolute;
background: #3498db;
z-index: 1
}
.cloud:after, .cloudshadow:after {
width: 100px; height: 100px;
top: -50px; left: 50px;
border-radius: 100px;
}
.cloud:before, .cloudshadow:before {
width: 180px; height: 180px;
top: -90px; right: 50px;
border-radius: 200px;
}<div class="cloud">
<div class="cloudshadow"></div>
</div>响应式云：
svg {
height: 50%;
width: 50%;
}
path {
fill: #3498DB;
stroke: #3498DB;
stroke-width: 2;
stroke-linejoin: round;
}
path:hover {
fill: aliceblue;
stroke: lightskyblue;
}<svg viewBox='0 0 105 105'>
<path d='M 25,60
a 20,20 1 0,0 0,40
h 50
a 20,20 1 0,0 0,-40
a 10,10 1 0,0 -15,-10
a 15,15 1 0,0 -35,10
z' />
</svg>这将会：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>
</title>
<style>
.cloud-body {
width: 250px;
height: 200px;
background: linear-gradient(blue, blueviolet);
border-radius: 50%;
}
.blob1 {
width: 130px;
height: 100px;
background: blue;
border-radius: 50%;
}
.blob2 {
width: 200px;
height: 150px;
background: linear-gradient(blueviolet, blue);
border-radius: 50%;
}
.blob3 {
width: 200px;
height: 150px;
background: linear-gradient(blueviolet, blue);
border-radius: 50%;
}
div.cloud-body,
div.blob1,
div.blob2,
div.blob3 {
float: left;
}
.my-4 {
margin-top: 2.4rem !important
}
</style>
</head>
<body>
<div style="display: inline;">
<div class="cloud-body "></div>
<div class="blob1 my-4 "></div>
<div class="blob2"></div>
<div class="blob3"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>