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

dearJhon

已于 2024-08-20 16:04:39 修改

阅读量724

点赞数

文章标签： css

于 2020-10-23 10:23:34 首次发布

本文链接：https://blog.csdn.net/weixin_43625763/article/details/109237038

版权

本文介绍了在微信小程序中遇到的一像素边框在安卓设备上显示过粗的问题，通过对比iOS和安卓的表现，指出了一种常见的解决方案——使用伪元素:before | :after进行边框的绘制，以实现兼容性的优化。

摘要由CSDN通过智能技术生成

小程序在各个地方都是比较坑的，就拿一像素边框来说，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 */