圆角边框属性圆角边框画芒果

最新推荐文章于 2023-07-11 17:23:55 发布

yshusencsdn

最新推荐文章于 2023-07-11 17:23:55 发布

阅读量278

点赞数

文章标签： css 圆角边框

本文链接：https://blog.csdn.net/yshusencsdn/article/details/98306001

版权

圆角边框属性

正方形+圆角边框属性 = 圆形(有弧度的图形)

长方形+圆角边框属性 = 椭圆形(有弧度的图形)

border-radius: 边框的弧度  px / % /em/rem

border-right-top-radius: 右上角
border-left-top-radius: 左上角

 <style>
    .box {
        width: 200px;
        height: 200px;background-color: red;
        /* border-radius: 20px; */
        /* 10px 左上和右下  30px 右上 左下 */
        /* border-radius: 10px 30px; */
        /* 30px 右上和左下 10px 左上  50px 右下 */
        /* border-radius: 10px 30px 50px; */
        /* 顺时针 */
        border-radius: 10px 20px 30px 40px;
    }
    
    </style>

圆角边框画芒果案例

在这里插入图片描述

  .box {
        width: 200px;
        height: 400px;background-color: #ffc107;
        /* border-radius: 20px; */
        /* 10px 左上和右下  30px 右上 左下 */
        /* border-radius: 10px 30px; */
        /* 30px 右上和左下 10px 左上  50px 右下 */
        /* border-radius: 10px 30px 50px; */
        /* 顺时针 */
        /* border-radius: 10px 20px 30px 40px; */
       border-radius:  151px 26px 160px 35px / 200px 62px 164px 35px;
      
       margin: 100px auto;
    }