10 - CSS3 - 边框圆角 - 太极八卦

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址 点击跳转

< ! ---------- HTML ----------- >

<div class="all">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

< ! --------- Style --------------- >

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .all{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 100px auto;
        position: relative;
    }
    .all .top{
        width: 200px;
        height: 100px;
        background-color: red;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
    }
    .all .bottom{
        width: 200px;
        height: 100px;
        background-color: deepskyblue;
        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 100px;
    }
    .all .left{
        width: 100px;
        height: 100px;
        border: 40px solid red;
        background-color: deepskyblue;
        box-sizing: border-box;
        border-radius: 50%;
        position: absolute;
        right: 0;
        bottom: 52px;
    }
    .all .right{
        width: 100px;
        height: 100px;
        border: 40px solid deepskyblue;
        background-color: red;
        box-sizing: border-box;
        border-radius: 50%;
        position: absolute;
        left: 0;
        bottom: 52px;
    }
</style>

< ! --------- 效果展示 ---------- >

**边框圆角 - 太极八卦**