画多种圆
效果图
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;
}
完成!