今天刚学会的在微信小程序中——利用css实现边框内凹半圆

      <view class="certificateContent">
        <view class="certificateName">
        </view>
        <view class="certificateCode">
          <view class="code">
          </view>
        </view>
      </view>

先使用border-radius来实现半圆的形状，在利用伪类元素::before和::after放在标签名code的前后，最后利用定位position来放置在合适的位置。具体实现样式如下：

<style lang="scss" scoped>
 .certificateContent {
  height: auto;
  padding: 0px 16px;
    .certificateName {
      height:100rpx;
       background: red
    }
.certificateCode {
    height: 100rpx;
    background: red
    border-top: 0;
    padding: 2px 16px 20px 16px;
    .code {
      position: relative;
    }
    .code::before {
      content: "";
      width: 10px;
      height: 20px;
      position: absolute;
      border: 1px solid #ffffff;
      border-radius: 0 20px 20px 0;
      border-left: none;
      position: absolute;
      left: -16px;
      top: -10px;
      background: #f6f7f8;
    }
    .code::after {
      content: "";
      width: 10px;
      height: 20px;
      position: absolute;
      border: 1px solid #ffffff;
      border-radius: 20px 0px 0px 20px;
      border-right: none;
      position: absolute;
      right: -16px;
      top: -10px;
      background: #f6f7f8;
    }
  }
}

</style>

实现效果如图：