Доброе утро.
Суть проблемы:
Размеры границ у "кнопки" смещаются при масштабировании (ctrl+ ctrl-). Но это не самое печально. Печально, что верхняя и нижняя граница выглядят неодинаковыми при масштабе 100%.
Кнопка сделана элементарно:
<button class="button-custom">
⠀⠀<span>ВОЙТИ</span>
</button>
.button-custom {
⠀⠀box-sizing: border-box;
⠀⠀width: 99px;
⠀⠀height: 44px;
⠀⠀border-radius: 22px;
⠀⠀padding: 2px;
⠀⠀// тут свойства шрифта, цвета фона, цвета текста и т.д.
⠀⠀& span {
⠀⠀⠀⠀display: table-cell;
⠀⠀⠀⠀text-align: center;
⠀⠀⠀⠀vertical-align: middle;
⠀⠀⠀⠀width: 95px;
⠀⠀⠀⠀height: 40px;
⠀⠀⠀⠀border-radius: 20px;
⠀⠀}
}
Суть в том, что использование разных подходов ничего не принесло. Значит проблема в том, как в браузерах программно реализовано отображение элемента. Эта проблема воспроизводима в Опере, Firefox и Google Chrome (и в IE). Но я не уверен, что проблема воспроизводима на других компьютерах.
Вот ссылка на codepen:
Codepen
Способ с border-image не работает с border-radius.
Что я пытался ещё сделать: псевдоэлемент ::before, который работал точно так же, как и этот способ со span (но ещё любил проваливаться через другие блоки без display: absolute из-за z-index).
Способ с background-clip не работает тоже на 100%.
Выдаёт такую красоту:
Неужели картинкой загружать? Не будет ли такого же эффекта?
Edit: Проблему решил, но не совсем понятно, что же вызывало проблемы.
