CSS Border Radius

前端 > CSS padding border radius

Created At : 2023-11-14 18:46

Count:151 Views 👀 :

Border Radius Tips

Border Radius Tips

成品：
外框的 b-radius,要比內框的 b-radius 大，才會對稱。

<body>
    <div class="container">
        <div class="box one">
            <div class="wrap"></div>
        </div>
        <div class="box two">
            <div class="wrap"></div>
        </div>    
    </div>
</body>

.box{
    width: 100px;
    height: 100px;
    margin: 10px;
    float: left;
}

.container{
    display: flex;
}
.one{
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid black;
    border-radius: 24px;
}
.two{
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid black;
    border-radius: 24px;
}
.wrap{
    width: 90%;
    height: 90%;
    background-color: yellow;
    border-radius: 14px;
}

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以邮件至 kimfei2014@gmail.com