Блог

Главная - Вопросы по программированию - Градиент границы исчезает на экране с большим разрешением

Градиент границы исчезает на экране с большим разрешением

#html #css #border #linear-gradients

#HTML #css #граница #линейные градиенты

Вопрос:

Когда я уменьшаю масштаб экрана, границы исчезают с некоторых сторон. Я предполагаю, что это потому, что заполнение 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%:

введите описание изображения здесь

Ответ №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>

Комментарии:

1. Это не создает тот же градиент.