css 页面缩放边框产生空隙相关

缩放产生空隙现象:
在这里插入图片描述

在这里插入图片描述
产生空隙原因:
若边框为1像素,未缩放时则下图一个网格就代表一个像素
在这里插入图片描述
当进行缩放时200%时,则两个网格代表1像素
在这里插入图片描述
当缩放到175%时,应该1.75格代表1像素,但由于硬件层次限制,比如一格用四个物理像素点绘制,0.25格就不绘制,故1.75格中的0.75,只能用三格绘制,未绘制的一格产生了空隙
在这里插入图片描述

解决方法:

  • 使用outline代替border,因为outline不占据空间,故未绘制的地方不会影响其他元素占据
outline:solid 1px red;

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/123191871