css 为元素添加细线边框

>>> 效果预览地址

为元素提供一个边框，宽度等于1个本地设备像素，可以显得非常清晰和清晰。

HTML

<div class="hairline-border">text</div>

CSS

.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}

说明

• box-shadow ，当仅使用扩展时，添加可以使用子像素*的伪边框。
• 使用@media (min-resolution: ...) 为了检查器件像素比(1dppx 等于96 DPI )，将box-shadow的分布设置为1 / dppx 。
• Chrome不支持上的子像素值border 。safari不支持上的子像素值box-shadow 。Firefox支持两者的子像素值。