先看效果:
css部分:
<style>
body{
background-color: pink;
}
.box1{
width: 100px;
height: 100px;
background:white;
position: relative;
margin: 30% auto;
border-radius :50%;
box-shadow: 15px 14px 17px 17px rgba(0, 0, 0, 0.2);
}
.box2{
width: 30px;
height: 100px;
background-color:white;
border-radius: 50%;
position: absolute;
top: 0;
left: 80px;
}
.box3{
width: 30px;
height: 100px;
background-color:white;
border-radius: 50%;
position: absolute;
top: 0;
right: 80px;
}
.box4{
width: 100px;
height: 30px;
background-color:white;
border-radius: 50%;
position: absolute;
top: 80px;
}
.box5{
width: 100px;
height: 30px;
background-color:white;
border-radius: 50%;
position: absolute;
bottom: 80px;
}
</style>
body部分:
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
评论 (0)