移动端1px细边框实现方案一

先来看两张图，一定要仔细看
粗边框效果图
细边框效果图

这是在浏览器端调试的截图。。凡胎肉眼可见。。没多大区别。。。但在移动端UI看的出来 o(╥﹏╥)o

直接说怎么实现的吧，主要利用伪元素和**transform: scaleY(.5);**属性对1px大小的伪元素进行缩小

.tablelist li{
	position: relative;
	padding: 0 10px;
	display: flex;
	text-align: center;
	align-items: center;
	color: #333;
	box-sizing: border-box;
}
.tablelist li::after{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	content: '';
	-webkit-transform: scaleY(.5);
	transform: scaleY(.5);
	background-color: #c8c7cc;
}
.tablelist li:last-child::after{
	display: none;
}

此方法有个缺点就是如果要做4方都是细边框的。。。就麻烦了