我要评论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;
}
本文地址：https://blog.csdn.net/qq_37034928/article/details/108863835
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论