首先說明一下這個組件不能直接寫樣式哑舒,需要外面套一層view
<view class='avatar'>
<open-data type='userAvatarUrl'></open-data>
</view>
隨后這個東西光寫border-radius: 50%;
不管用,帶上邊框的話能看到圖片是蓋在邊框上的幻馁,也就是說view的屬性本身都是好用的洗鸵,只是顯示頭像的圖片沒被view約束住,上網(wǎng)百度了一下仗嗦,有些解決方案是做一個遮罩膘滨,罩在圖片上實(shí)現(xiàn)圓角,感覺不是很優(yōu)雅稀拐,最后找到一個解決方案火邓,只需要加一句話就好了overflow: hidden;
就像這樣:
.avatar{
width: 20vw;
height: 20vw;
border-radius: 50%;
overflow: hidden;
}