收藏
回答

样式中设置background: radial-gradient,真机预览不生效,是官方不支持吗?

<view class='home-route-left'>单程</view>
.home-route-left {
    &:after {
      content'';
      position: absolute;
      bottom0;
      width0;
      height0;
      height75rpx;
      width40rpx;
      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;
      bottom0;
      width0;
      height0;
      height80rpx;
      width40rpx;
      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;
    }
  }

我在调试工具看到样式生效了,但是真机预览就发现样式并没有生效,请问是什么情况呢?有什么解决方案吗?

想要的效果就是图中红框中的弧线。

回答关注问题邀请回答
收藏

2 个回答

  • 红鲤鱼与绿鲤鱼与驴
    红鲤鱼与绿鲤鱼与驴
    2023-03-21

    试着也不是不支持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);

    2023-03-21
    有用
    回复
  • ······
    ······
    2021-07-04

    开发者工具 安卓都正常显示 iOS不显示 基础库2.10.4

    2021-07-04
    有用
    回复
登录 后发表内容