如何利用CSS实现圆环进度条的内环阴影效果？

<view class="circle">
  <view class="circle-left">
    <view class="left"></view>
  </view>
  <view class="circle-right">
    <view class="right"></view>
  </view>
  <view class="circle-l"></view>
  <view class="circle-s"></view>
  <view class="circle_num">{{percent}}%</view>
</view>

.circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 450rpx;

  .circle-left {
    position: absolute;
    width: 400rpx;
    height: 400rpx;
    clip: rect(0rpx, 200rpx, 400rpx, 0rpx);
    border-radius: 50%;
    background-color: #1C1D23;

    .left {
      position: absolute;
      width: 400rpx;
      height: 400rpx;
      clip: rect(0rpx, 200rpx, 400rpx, 0rpx);
      background-color: #1C1D23;
      border-radius: 50%;
    }
  }

  .circle-right {
    position: absolute;
    width: 400rpx;
    height: 400rpx;
    clip: rect(0rpx, 400rpx, 400rpx, 200rpx);
    border-radius: 50%;
    background-color: #1C1D23;

    .right {
      position: absolute;
      width: 400rpx;
      height: 400rpx;
      clip: rect(0rpx, 400rpx, 400rpx, 200rpx);
      background-color: #1C1D23;
      border-radius: 50%;
    }
  }

  .circle-l {
    position: absolute;
    width: 450rpx;
    height: 450rpx;
    border-radius: 50%;
    box-shadow: 0rpx 0rpx 20rpx #4F4F5B;
    background: #1C1D23;
  }

  .circle-s {
    position: absolute;
    width: 280rpx;
    height: 280rpx;
    border-radius: 50%;
    box-shadow: -2rpx -2rpx 6rpx #fff;
    background: #23232B;
  }

  .circle_num {
    position: absolute;
    width: 100%;
    font-size: 2rem;
    color: #fff;
    z-index: 6;
  }
}