uni-app 移动端开发1px像素线条变粗的解决方法

伪类 + scale

	.bor-line{
	  position: relative;
	}
			
	.bor-line:after {
	   content: " ";
	   position: absolute;
	   left: 0;
	   bottom: 0;
	   right: 0;
	   height: 1px;
	   color: #e0e0e0;
	   transform-origin: 0 100%;
	   transform: scaleY(0.5);
	   z-index: 1;
					
	}
	.bor-line:before {
	   content: " ";
	   position: absolute;
	   left: 0;
	   top: 0;
	   right: 0;
	   height: 1px;
	   border-bottom: 1px solid #e0e0e0;
	   color: #e0e0e0;
	   transform-origin: 0 0;
	   transform: scaleY(0.5);
	   z-index: 1;
    }

使用box-shadow模拟边框

//利用css 对阴影处理的方式实现0.5px的效果。
.box-shadow-1px { 
  box-shadow: inset 0px -1px 1px -1px #c8c7cc; 
} 

使用border-image

// 首先需要自己制作一个0.5像素的线条作为线条背景图片
p{ 
    border-width: 0 0 1px 0; 
    border-image: imageUrl 2 0 round; 
} 

利用背景渐变linear-gradient

利用linear-gradient利用背景图片渐变，从有色到透明，默认方向从上到下，从0deg到50%的地方颜色是边框颜色，然后下边一半颜色就是透明了。然后设置背景宽度100%，高度是1px，再去掉repeat，所以有颜色的就是0.5px的边框。代码如下：

.bg_border { 
    background-image: linear-gradient(0deg,black 50%,transparent 50%); 
    background-size: 100% 1px; 
    background-repeat: no-repeat; 
}