Варьирование 0-1px разрыва между фоном div и границей на экранах с высоким разрешением - PullRequest
Новая
       102

Варьирование 0-1px разрыва между фоном div и границей на экранах с высоким разрешением

3 голосов
/ 30 мая 2019

Вот отдельный пример кнопки, которую я создал в CSS. Он имеет границу 1px с градиентом и градиент фона. Фоновый градиент реализован в виде псевдоэлемента, чтобы его прозрачность исчезла при наведении.

https://codepen.io/anon/pen/wbYoeo?editors=1100

.Button
{
  width: 200px;
  height: 30px;
  cursor: pointer;
    padding: 0.8rem;
    border-style: solid;
    border-image: linear-gradient(
        to right,
        green 0%,
        blue 100%);
    border-image-slice: 1;
    border-width: 1px;
    position: relative;
  margin-top: 10px;
    transition: color 0.2s;
}

.Button::before
{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: linear-gradient(
        to right,
        green 0%,
        blue 100%);
    opacity: 0.5;
    transition: opacity 0.2s;
}

Кнопка не отображается одинаково между мониторами с различным DPI. Снимки экрана кнопки, отображаемой в Chrome для Windows с различными масштабами DPI:

Монитор с масштабированием 100% DPI, корректное рендеринг без пропусков.

Монитор с масштабированием DPI 150%, показывающий разрыв между фоном и границей.

Монитор с масштабированием DPI 175%, показывающий разрыв между фоном и границей.

Монитор с масштабированием 200% DPI, корректное рендеринг без пропусков.

Я попробовал несколько стратегий для рендеринга кнопки, но все они приводят к разрыву:

  • Попытка с использованием изображения с градиентом вместо linear-gradient на border-image и background-image.
  • Попытка использовать явный div для градиента фона вместо псевдоэлемента.
  • Пытался использовать явный div для градиента фона вместо псевдоэлемента, а также использовал сплошную левую и правую границу и псевдоэлементы :: before и :: after с линейно-градиентным фоном для верхней и нижней границ. .

1 Ответ

1 голос
/ 30 мая 2019

Причина?

Я бы предположил (необразованным), что это вызвано субпикселями при масштабировании.Он не может быть частью пикселя, поэтому он выбирает значение целого пикселя;Расчетное значение родителя на 1 пиксель больше, чем значение, данное детям в некоторых масштабах.

Обходной путь

Снимите границу с самой кнопки div и поместите ее на псевдо- ::afterэлемент, поэтому граница и фон являются дочерними.Граница теперь масштабируется в соответствии с градиентом фона.

Пример 

.Button {
  width: 200px;
  height: 30px;
  cursor: pointer;
  padding: 0.8rem;
  position: relative;
  margin-top: 10px;
  transition: color 0.2s;
}

.Button::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: linear-gradient( to right, green 0%, blue 100%);
  opacity: 0.2;
  transition: opacity 0.2s;
}

.Button:hover::before {
  opacity: 0.5;
}

.Button:active::before {
  opacity: 1;
}

.Button::after {
  content: '';
  border-style: solid;
  border-image: linear-gradient( to right, green 0%, blue 100%);
  border-image-slice: 1;
  border-width: 1px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

html {
  height: 100%;
  display: table;
  margin: auto;
}

body {
  background: black;
  display: table-cell;
  vertical-align: middle;
  color: white;
  font-family: sans-serif;
}
Click it:
<div class="Button"></div>
...