前言
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的绘制。
后言
创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力
