微信小程序实现图片底部带有弧度

1.实现效果

2.实现思路

border-radius

border-radius: 1-4 length|% / 1-4 length|%;

每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

3.实现代码

<view class="mb20">方法一:不推荐，图片适配不好,被放的很大</view>
<view style="overflow: hidden;" class="flex-column">
  <view class="imgbox">
    <image src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" class="im" mode="aspectFill"></image>
  </view>
</view>
<view class="mb20">方法二:border-radius</view>
<image src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" mode="aspectFill" class="box" />

.mb20 {
  margin: 20rpx auto;
  color: #333;
  font-size: 29rpx;
  padding: 0 20px;
}

.imgbox {
  width: 1151rpx;
  height: 711rpx;
  border-radius: 50%;
  margin-top: -242rpx;
  overflow: hidden;
}

.im {
  width: 100%;
  height: 100%;
}

.box {
  width: 750rpx;
  height: 300px;
  border-radius: 100% 100% 100% 100% / 0% 0% 18% 18%;
}

4.写在最后🍒

看完本文如果觉得有用，记得点赞+关注+收藏鸭 🍕

更多小程序相关，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~