微信小程序之修改button形状大小样式

最新推荐文章于 2025-03-06 13:39:15 发布

乾巽

最新推荐文章于 2025-03-06 13:39:15 发布

阅读量6.4k

点赞数 3

分类专栏：微信小程序文章标签： javascript css

本文链接：https://blog.csdn.net/weixin_44291388/article/details/105846806

版权

微信小程序专栏收录该内容

4 篇文章

订阅专栏

先上效果图:
在这里插入图片描述
wxml:

<view class="box">
  <button class="item" plain>1</button>
  <button class="item" plain>2</button>
  <button class="item" plain>3</button>
  <button class="item" plain>4</button>
</view>

wxss:

.box{
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
  margin-top: 200rpx;

}
.box .item{
  display: flex;
  flex-direction: column;
  width: 320rpx;
  height: 320rpx;
  border-radius: 70rpx;
  background-color: rgb(186, 218, 23);
  justify-content: center;
  align-items: center;
  margin-bottom: 40rpx;

}

希望对你有所帮助~