在CSS中制作一条非常细的白线

Question

这可能听起来很傻，但我不知道如何制作比1px小的细线。

我正在寻找的是这样的：

https://www.simple.com/

如果你这样做：

    .nav-bar {
       border-bottom: 1px;
    }

几乎是两倍，即使不是三倍厚。正如您可能也知道的那样，1em只会向1px方向前进。

有人有什么想法吗？

Answer 1

.nav-bar {
  border-bottom: 1px solid rgba(255,255,255,.25);
}

这将生成白色1px线，其不透明度为25％。这与您的示例页面大致相同。透明度是关键;该线不能比1px更薄。

段：

body {
  background: black;
}

.nav-bar {
  width:100%;
  height:100px;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

<div class="nav-bar">

Answer 2

简单地使用不透明度给人的印象是线条比1px更薄。

正如用户@Papa指出的那样，1px是您可以指定的最小测量值：

.nav-bar {
    border-bottom: 1px solid rgba(0,0,0,0.25)
}