前言

hello world欢迎来到前端的新世界

---

😜当前文章系列专栏：前端系列文章
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

使用伪类和transform

.hairline {position: relative;
}
.hairline::after {content: '';position: absolute;left: 0;bottom: 0;width: 100%;border-bottom: 1px solid #000;transform: scaleY(0.5);
}

使用border-image

使用border-image属性来创建一个渐变的边框效果，从而可以实现1像素的边框线条。

/* CSS样式 */
.border-1px {border-width: 1px;border-style: solid;border-image: linear-gradient(to right, #000 0%, #000 100%);
}

使用box-shadow

通过设置box-shadow属性的模糊半径为0，可以实现一个1像素的阴影效果，从而达到1像素边框的视觉效果。

/* CSS样式 */
.shadow-1px {box-shadow: 0 0 0 1px #000;
}

使用媒体查询及scale

通过结合媒体查询以及CSS3的transform: scaleY属性，可以根据设备像素比例对1px元素进行缩放，以便在高清屏幕上显示清晰的1像素线条。

/* CSS样式 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {.scale-1px {position: relative;}.scale-1px::after {content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: #000;transform: scaleY(0.5);}
}

使用viewport单位

可以使用vw（视窗宽度的百分比）或vh（视窗高度的百分比）单位来代替像素单位，在一定程度上解决高清屏幕下1px显示模糊的问题。

使用图片或SVG

对于边框或分隔线等特别细的元素，可以考虑使用图片或SVG来代替纯CSS的绘制。

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力