畫多種圓

效果圖

test.wxml

<view class='wrpg-top'>
 <view class='clike'>
      <view class="element">
        <view class="child">
          <view class="childw">
            <view class="child1">
              <view class="child2"></view>
            </view>
          </view>
        </view>
      </view> 
    </view>
</view>
 

test.wxss

.wrpg-top {
  width: 100%;
  height: 40%;
  margin: 0 auto;
  background: linear-gradient(#86d0d0, #81e1b4);
  border-radius: 10rpx;
}
.clike {
  width: 100%;
  height: 100%;
  /* background: orange; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.element {
  width: 400rpx;
  height: 400rpx;
  /* background-color: lightpink; */
  border-radius: 50%;
  border: 3rpx solid white;
  margin: 0 auto;
  margin-top: 20rpx;
}

.child {
  width: 320rpx;
  height: 320rpx;
  border-radius: 50%;
  /* background-color: #096; */
  position: relative;
  border: 3rpx solid white;
  top: 40rpx;
  left: 40rpx;
}

.childw {
  width: 260rpx;
  height: 260rpx;
  border-radius: 50%;
  /* background-color: #81e1b4; */
  border: 3rpx solid white;
  position: relative;
  top: 30rpx;
  left: 30rpx;
}

.child1 {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  /* background-color: red; */
  border: 3rpx solid white;
  position: relative;
  top: 40rpx;
  left: 40rpx;
}

.child2 {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  /* background-color: red; */
  border: 3rpx solid white;
  position: relative;
  top: 40rpx;
  left: 40rpx;
}
 

完成！