《css揭秘》读后感2-border-radius的玩法

前端入坑纪 69

今天来分享经常在网页中用到的圆角效果，其实它还有更深的一面

好，详解如下！

OK，first things first！ 点我查看实际效果

变给你看

HTML 结构

    <div class="rd rd1">rd1</div>
    <div class="rd rd2">rd2</div>
    <div class="rd rd3">rd3</div>
    <div class="rd rd4">rd4</div>
    <div class="rd rd5">rd5</div>
    <div class="rd rd6">rd6</div>
    <div class="rd rd7">rd7</div>

当然啦，首先放置7个div来演示效果

CSS 结构

    .rd{
        margin: 20px auto;
        color: #fff;
        line-height: 40px;
        text-align: center;
        width: 60px;
        height: 40px;
        border: 1px solid #ccc;
        background:lightskyblue
    }
    .rd1{
        border-radius: 50%
    }
    .rd2{
        border-radius: 30px / 20px
    }
    .rd3{
        border-radius: 30px 30px / 20px 20px
    }

    .rd4{
        border-radius: 30px 10px 30px / 20px 10px 20px
    }
    .rd5{
        border-radius: 30px 10px 30px 10px / 20px 10px 20px 10px
    }
    .rd6{
        border-radius: 10px 30px / 10px 20px
    }
    .rd7{
        border-radius: 10px 30px 10px 30px / 10px 20px 10px 20px
    }

首先给每个div基本的rd样式，然后分别设置对应的border-radius.其实border-radius: 后面跟的属性是有两种。/ 分隔后，分别代表水平和垂直方向上各自的圆角半径，例如：border-radius:50% 其实是 border-radius:50% / 50%的简写，也是 border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% 的简写。这四个值分别代表了矩形四个角的位置：左上，右上，右下，左下。而rd4三个值的缩写，则代表了右上=左下，所以就省略了左下。可能描述的有些绕，小伙伴可以自己参考原作者的书籍或者百度查找相关资料

总结

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

*****作者原创内容,大家互相支持,谢谢!!!*****

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包