美文网首页微信小程序开发者
将用户头像(open-data)切成圆

将用户头像(open-data)切成圆

作者: 甚时跃马归来 | 来源:发表于2018-08-23 16:35 被阅读1次

    如何将open-data元素,type=userAvatarUrl 时的头像切成圆呢?

    一开始想到的是:

    <!-- wxml -->
    
    <open-data type='userAvatarUrl' class='avatar'></open-data>
    
    // wxss
    .avatar{
      width:200rpx;
      height:200rpx;
      border-radius:50%;
    }
    
    

    然而,并不起作用...

    于是网上翻资料看到,需要再添加一个属性才行,于是变成这样,大功告成!

    .avatar{
      width:200rpx;
      height:200rpx;
      border-radius:50%;
      overflow:hidden;  // 新增加的属性
    }
    
    

    ps:将border-radius设成50%,改宽高的时候就不用改圆角半径啦,算是一个好的编程习惯吧,偷笑。

    相关文章

      网友评论

        本文标题:将用户头像(open-data)切成圆

        本文链接:https://www.haomeiwen.com/subject/kfjmiftx.html