小程序怎么做圆角头像

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

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

小程序怎么做圆角头像

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

小程序怎么做圆角头像

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

小程序怎么做圆角头像

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

小程序怎么做圆角头像

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

小程序怎么做圆角头像

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

小程序怎么做圆角头像

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

  • IntelliJ IDEA怎么代码编辑器移动显示两个窗口
  • notability怎样添加分配器
  • 计算机组成原理运算器的微程序实验和独立实验结果一样吗
  • 如何获取历年 GDP 数据并展示?
  • 如何打开Android Studio最近使用项目?
  • 热门搜索
    讲卫生手抄报内容 向国旗敬礼手抄报图 关于元旦的英语手抄报 二年级国庆节手抄报 文化手抄报 我爱运动手抄报 成长足迹手抄报内容 关于法制的手抄报内容 小学生健康手抄报 安全的手抄报内容