微笑小程序 1px边框border

像素基本概念： 参考这篇文章微信小程序----适配小结、移动端1px与选择器权重，里面已经很清楚的描述了像素单位及为什么会出现CSS写的1px，实际上看起来比1px粗。

直接上代码：

/* border 1px样式 */
.border_bottom, .border_top, .border_all {
  position: relative;
}

.border_top::after {
  position: absolute; 
  content: '';
  width: 100%;
  left: 0;
  top: 0;
  height: 1px;
  padding: 0 32rpx;
  box-sizing: border-box;
  background-color: #E6E6E6;
  -webkit-transform: scale(1, 0.5);
  transform: scale(1, 0.5);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.border_bottom::after {
  position: absolute; 
  content: '';
  width: 100%;
  left: 0;
  bottom: 0;
  height: 1px;
  padding: 0 32rpx;
  box-sizing: border-box;
  background-color: #E6E6E6;
  -webkit-transform: scale(1, 0.5);
  transform: scale(1, 0.5);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.border_all::before {
  content: '';
  display: block;
  position: absolute;
  width: 200%;
  height: 200%;
  border: 1px solid #d9d9d9;
  border-radius: 10rpx;
  transform-origin: 0 0;
  transform: scale(0.5, 0.5);  
  -webkit-transform: scale(0.5, 0.5);
  box-sizing: border-box;
}

此方法最好的地方是可以设置border-radius圆角，要注意的是效果有偏差时检查是否在.border_bottom, .border_top, .border_all中设置了display：flex;或者padding