圆角跟内凹角样式demo

image.png

html:

<view class="pannel">
            <view class="toppannel">
                <view class="card">
                    <view class="cardleft"></view>
                    <image src="" alt=""></image>
                </view>
                <view><text></text></view>
        <view class="border"></view>
            </view>
            <view class="bottompannel">
                <view class="way"></view>
                <image src="" alt=""></image>
                <view class="text"><text></text></view>
            </view>
        </view>

css:

.register .pannel {
  width: 669rpx;
  height: 817rpx;
  border-radius: 16rpx;
  margin: 0 auto;
  margin-top: 30rpx;
}
.register .pannel .toppannel {
  background-color: #fff;
  border-radius: 16rpx 16rpx -16rpx -16rpx;
  height: 478rpx;
  width: 100%;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background-image: radial-gradient(circle at left bottom, #2037C2, #2037C2 15px, transparent 15px),radial-gradient(circle at right bottom, #1C18AC, #1C18AC 15px, transparent 15px);
  position: relative;
}
.border{
  height: 2px;
  width: 86%;
  border-bottom: 1px dashed #2546be;
  position: absolute;
  bottom: 0;
  left: 7%;
}
.register .pannel .bottompannel {
  height: 336rpx;
  width: 100%;
  background-color: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background-image: radial-gradient(circle at left top, #2037C2, #2037C2 15px, transparent 15px),radial-gradient(circle at right top, #1C18AC, #1C18AC 15px, transparent 15px);
}