微信小程序border边线太粗问题

border：1rpx solid #eee;

一般来说,border的最小宽度为1rpx，在手机上显示确实显得有点粗糙；iOS手机系统支持浮点数,可以使用rpx作为单位，可设置为1rpx，相当于0.5px，而安卓系统就不行了，那么如何解决安卓系统上太粗糙的问题呢？

比较好的一种解决办法是使用伪类：

.menus {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90rpx;
}

.menus::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #d9d9d9;
  color: #d9d9d9;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.3);
  transform: scaleY(0.3);
  left: 0;
  z-index: 2;
}

伪类效果如下（底部四个按钮上方的边线）：

伪类效果.jpg

border-top效果如下（底部四个按钮上方的边线）：

border-top效果.jpg