CSS实现图片底部弧度效果

还有一种就是使用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>