用css写一个这样的div

Ezra
2021-02-24 / 0 评论 / 237 阅读 / 正在检测是否收录...

先看效果:微信截图_20210224110903.png
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

评论 (0)

取消