<view class='home-route-left'>单程</view>
.home-route-left {
&:after {
content: '';
position: absolute;
bottom: 0;
width: 0;
height: 0;
height: 75rpx;
width: 40rpx;
background: radial-gradient(40rpx 80rpx at right top, transparent 100%, aquamarine 50%);
background: -webkit-radial-gradient(40rpx 80rpx at right top, transparent 100%, aquamarine 50%);
right: -64rpx;
}
&:before {
content: '';
position: absolute;
bottom: 0;
width: 0;
height: 0;
height: 80rpx;
width: 40rpx;
background: radial-gradient(40rpx 80rpx at left bottom, aquamarine 100%, transparent 0);
background: -webkit-radial-gradient(40rpx 80rpx at left bottom, aquamarine 100%, transparent 0);
right: -35rpx;
}
}
我在调试工具看到样式生效了,但是真机预览就发现样式并没有生效,请问是什么情况呢?有什么解决方案吗?
想要的效果就是图中红框中的弧线。
试着也不是不支持radial-gradient的at语法,我遇到的是shape后的size不支持。单纯的radial-gradient确实可以用。
这条到了ios真机上就不生效,在安卓上正常
background-image: radial-gradient(circle 50px at 50% -30px, transparent 50px, #FFE93F);
而下边这条就行
background-image: radial-gradient(circle at bottom, #FFE93F, #FFE93F);
开发者工具 安卓都正常显示 iOS不显示 基础库2.10.4