CSS SNIPPET

  返回

发丝边框实现  视觉效果

为元素设置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;
  }
}
效果演示
text
代码说明
  1. box-shadow, 当仅使用spread时,效果就是添加一个可以使用子像素*的伪边框。
  2. 使用@media (min-resolution: ...) 检查设备像素比(1dppx = 96 DPI),设置 box-shadow 的spread为1 / dppx
浏览器支持

100.0%

⚠️ 完整支持需要使用替代语法和JavaScript检查浏览器的user agent。


*Chrome不支持为border设置子像素值。Safari不支持为box-shadow设置子像素值。 Firefox 同时支持这两种属性设置子像素值。