css一像素边框 |网页css 微软雅黑

在CSS3之前，实现一像素边框被视为一项挑战，常见的方法是使用图片或者JavaScript。但是这些方法存在一些问题，如增加网页加载时间、不支持响应式布局等。

.eg-border {
position: relative;
}
.eg-border::before {
content: "";
position: absolute;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #dcdcdc;
box-sizing: border-box;
}

使用CSS来实现一像素边框，可以避免上述问题。代码中的::before伪元素用于添加边框，通过设置宽度为100%和box-sizing为border-box，可以保证边框不会影响元素的大小和定位。使用z-index来设置边框层级，使其出现在元素上方。

需要注意的是，使用CSS实现一像素边框，需要考虑到不同设备的像素密度。如在移动设备上，一像素边框可能会变粗，需要使用viewport单位或者js处理。