给矩形添加圆角

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

于 2023-09-21 21:36:52 发布

阅读量174

点赞数

文章标签： css css3 前端

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

版权

这篇文章详细介绍了CSS中border-radius属性的各种用法，包括不同角度、混合角以及不规则形状的实现，展示了如何通过CSS样式创建出丰富的图形效果。

摘要由CSDN通过智能技术生成

<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>