CSS实现图片底部弧度效果

最新推荐文章于 2023-11-09 11:16:08 发布

林间风雨

最新推荐文章于 2023-11-09 11:16:08 发布

阅读量1.9k

点赞数 3

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/jack_rose_me/article/details/121356668

版权

CSS 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

在这里插入图片描述
还有一种就是使用border-radius的八个值

  <!--  x轴 上1  右2  下3  左4/ y轴 上5 右6  下7   左8 -->

 <div style="width: 400px;height: 200px;background:red;margin: 0 auto; 
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;">
        八个值
   </div>
    <div style="width: 400px;height: 200px;background:red;margin: 0 auto;
      border-radius: 0 0 50% 50% / 0 0 20% 20%;">
        八个值
    </div>