radial-gradient
在微信小程序ios中会有兼容性问题
效果如图:
// html
<view class="cro">
<view class="cro_left_top"></view>
<view class="cro_right_top"></view>
<view class="cro_left_bottom"></view>
<view class="cro_right_bottom"></view>
</view>
// css
.cro {
width: 600rpx;
height: 300rpx;
background: #0c8;
position: relative;
margin: 200rpx auto;
}
.cro_left_top, .cro_right_top, .cro_left_bottom, .cro_right_bottom {
position: absolute;
width: 40rpx;
height: 40rpx;
border: 1px solid #fff;
z-index: 1;
background: #fff;
}
.cro_left_top {
top: -1px;
left: -1px;
border-radius: 0px 0px 40rpx 0px;
border-bottom: 1px solid #0c8;
border-right: 1px solid #0c8;
}
.cro_right_top {
top: -1px;
right: -1px;
border-radius: 0px 0px 0px 40rpx;
border-bottom: 1px solid #0c8;
border-left: 1px solid #0c8;
}
.cro_left_bottom {
left: -1px;
bottom: -1px;
border-radius: 0px 40rpx 0px 0px;
border-top: 1px solid #0c8;
border-right: 1px solid #0c8;
}
.cro_right_bottom {
right: -1px;
bottom: -1px;
border-radius: 40rpx 0px 0px 0px;
border-top: 1px solid #0c8;
border-left: 1px solid #0c8;
}