较大的分辨率屏幕上边框渐变消失

Question

当我缩小屏幕时，边框会在某些侧面消失。我假设这是因为0.05rem的填充太小，无法在高分辨率屏幕上检测到。是否有解决此问题的好方法？

CodePen

body {
  background: black;
}

.module-border-wrap {
  max-width: 250px;
  position: relative;
  background: linear-gradient(to right, red, purple);
  padding: 0.05rem;
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
}

<div class="module-border-wrap">
  <div class="module">
    Lorem ipsum dolor
  </div>
</div>

100％缩放：

90％缩放：

Answer 1

我将使用一个元素和多个背景来优化代码。不确定是否可以解决您的问题，但对我而言似乎很好：

body {
  background: black;
}

.module {
  background: 
    linear-gradient(#222, #222) padding-box, 
    linear-gradient(to right, red, purple) border-box;
  color: white;
  border: 0.05rem solid transparent;
  padding: 2rem;
  max-width: 250px;
}

<div class="module">
  Lorem ipsum dolor
</div>