open-data组件当头像用实现圆角(小程序)

首先说明一下这个组件不能直接写样式，需要外面套一层view

<view class='avatar'>
  <open-data type='userAvatarUrl'></open-data>
</view>

随后这个东西光写border-radius: 50%;不管用，带上边框的话能看到图片是盖在边框上的，也就是说view的属性本身都是好用的，只是显示头像的图片没被view约束住，上网百度了一下，有些解决方案是做一个遮罩，罩在图片上实现圆角，感觉不是很优雅，最后找到一个解决方案，只需要加一句话就好了overflow: hidden; 就像这样：

.avatar{
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  overflow: hidden;
}