给矩形添加圆角

最新推荐文章于 2024-10-02 15:35:50 发布

一个尚在学习的计算机小白

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量116

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_52396030/article/details/133090820

版权

<style>
        div{

            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 0 auto;
            /* 圆角效果大小 */
            /* 四个角一样 */
            border-radius: 10px;
            /* 左上右下两个角10px，左下右上为5px */
            border-radius: 10px 5px;
            /* 左上两个角10px，左下右上为5px，右下为20px */
            border-radius: 10px 5px 20px;
            /* 左上两个角10px，左下15px，右上为5px，右下为20px */
            border-radius: 10px 15px 5px 20px;
            /* 单独设置左上角 */
            border-top-left-radius: 10px;
            /* 单独设置右上角 */
            border-top-right-radius: 10px;
             /* 单独设置左下角 */
             border-bottom-left-radius: 10px;
            /* 单独设置右下角 */
            border-bottom-right-radius: 10px;
            /* 在水平方向上的弧度长30px，垂直方向上60px */
            border-radius: 30px/60px;
            border-radius: 10px 5px/20px 10px;
            border-radius: 10px 15px 5px 20px/50px 40px 30px 20px;

        }
    </style>