css1像素下边框问题

Bertha 。 2023-01-16 02:43 168阅读 0赞

## 1px下边框显示问题 ##

今天做移动端项目时在ui设计图稿出现了1px的下边框线  
![1px下边框][1px]  
但是在我实际做项目中

border-bottom:1px solid #ccc;

如图，直接设置会发现实际比1px要粗很多  
![代码出现问题][20210423134518455.png]

代码设置的时1px，但是实际为4px，比ui稿上还要粗，一下被我的像素眼给发现了，在论坛中找到的方法，觉得挺实用的，可以记录一下，方便以后查找。

## 产生的原因 ##

这种问题产生的原因是因为随着科技的进步，各个设备的像素变得越来越高，1px显然在有点设备上为虚拟单位，甚至显示不到，会出现两种问题：  
1.老设备，像素低，像素达不到精确的1px，所以会比较粗  
2.新设备，像素高，因为像素点多且密集，1px则微微看不到

## 解决办法 ##

使用css的伪类，在需要下边框的元素下新增一个高度为1px的块级元素，将其设置定位，定位在底部，在再将其y轴进行0.5倍的缩放，并且赋予其背景颜色，来达到1px的效果

div{ 
    	width:500px;
    	height:300px;
    }
    div:before{ 
    	content: '';
    	position: absolute;
    	left: 0;
    	bottom: 0;
    	background: #DDDDDDFF;
    	width: 100%;
    	eight: 1px;
    	-webkit-transform: scaleY(0.5);
    	transform: scaleY(0.5);
    	-webkit-transform-origin: 0 0;
    	transform-origin: 0 0;
    			}

仅代表我的个人理解和总结，可能有很多不到位的地方，欢迎大佬补充指点，一起探讨。

[1px]: /images/20221022/099e6e0229ed4a88a8d60aa951841b18.png
[20210423134518455.png]: /images/20221022/63f0cf4abdf9408c9ff9a57bedce48cb.png