小程序怎么做圆角头像

时间:2024-10-15 07:31:04

1、首先准备一个小程序的目录结构,如下图所示

小程序怎么做圆角头像

2、然后将图片拷贝进去,如下图所示

小程序怎么做圆角头像

3、接着在wxml中显示图片,如下图所示

小程序怎么做圆角头像

4、我们可以看到左侧的显示是正方形的,如下图所示

小程序怎么做圆角头像

5、然后我们进入一个border-radius属性,值为50%

小程序怎么做圆角头像

6、这个时候圆角就出来了,如下图所示,因为我的是长方形的图片所以是椭圆

小程序怎么做圆角头像

7、综上所述,小程序中制作圆角头像就用border-radius,你学会了码

© 手抄报圈