css - 在 vmin 单元中设置的边框导致间隙

Question

描述
我有一个奇怪的错误，当使用 vmin 设置时，边框会导致内容和边框本身之间出现小间隙。单位。
可重现的片段
调整窗口大小以查看它，因为它只发生在某些设备视口(viewport)上

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 80%;
  height: 80%;
  border-right: 1vmin solid red;
}

.content {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: black;
}

<div class="container">
   <div class="content" />
</div>

房屋

我正在用 vmin 设置边框单位以使其在任何屏幕分辨率之间保持一致

元素应保持当前结构(父边框，子边框)

两个元素都应该有 display: flex

问题
我怀疑问题在于 vmin值被四舍五入为像素，从而创建了可以在类似场景中看到的额外像素(背景中的 child 突出显示间隙)。
我尝试了什么

通过拥有 display: table s 而不是 flex修复了额外的像素，但这不是一个选项，因为需要 flex

vw/vh或任何视口(viewport)单元生成相同的问题

解决方案

具有灵活边框的解决方案可能是简单地设置 .container:after与 width百分比，height到 100% 和 background-color而不是 border .这个解决方案工作得很好，但它不是一个可扩展的解决方案，以防我们需要的不仅仅是一个边界边(例如 border-right )。

结论
所以在这一切的前提下，是否有一些技巧可以直接应用于边界(或其元素)来绕过它？
我不关心找到第一个可行的解决方案；如前所述，解决方案已经存在，所以这个问题仅仅是出于对编写更好代码的好奇。

Answer 1

尝试使用 box-shadow反而。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 80%;
  height: 80%;
  box-shadow: 1vmin 0 0 0 #f00;
}

.content {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: black;
}

<div class="container">
   <div class="content" />
</div>

box-shadow: 1vmin 0 0 0 #f00;对于右边框， box-shadow: 0 0 0 1vmin #f00;为完整的边界。

编辑:
为什么差距会消失？我认为这是因为 box-shadow 是一种带有一些偏移的背景。因此，十进制像素位于末尾。我猜。

但请记住，它的作用与 @doğukan 所说的不同。在评论中。

but box-shadow doesn't work like border. see the difference. with border: i.stack.imgur.com/gqgsD.png box-shadow: i.stack.imgur.com/2ZsrA.png if this is not a problem, box-shadow works fine.