小程序一像素边框在安卓显示比较粗解决办法

300 阅读1分钟

小程序在各个地方都是比较坑的,就拿一像素边框来说,ios显示正常,安卓手机显示大概2像素宽,维护一个小程序时发现祖传的代码是用一像素的图片代替的边框,遂记录一下兼容安卓一像素边框问题的办法。

伪元素:before | :after

/* 给class为myBox的view添加一个下边框 */
.myBox{
	width: 400rpx;
	height: 400rpx;
	position: relative;
}
.myBox:after{
	content: '';
	width: 100%;
	height: 2rpx;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scaleY(0.5);
}
/* 伪元素的content为必写项,当添加竖向边框时transform的属性值scaleY缩放需要改成scaleX */