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

【问题标题】：Border gradient disappears on larger resolution screen边框渐变在较大分辨率的屏幕上消失
【发布时间】：2019-03-14 23:37:39
【问题描述】：

当我缩小屏幕时，某些边的边框会消失。我假设这是因为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% 缩放：

【问题讨论】：

标签： html css border linear-gradients

【解决方案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>

【讨论】：

那不会产生相同的渐变。