@voxman90

Как вложить один блок в другой, чтобы границы отображались как равные?

Доброе утро.

Суть проблемы:
5f111ff075586429918940.png

Размеры границ у "кнопки" смещаются при масштабировании (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%.
Выдаёт такую красоту:
5f112f6e74cae172158386.png
Неужели картинкой загружать? Не будет ли такого же эффекта?

Edit: Проблему решил, но не совсем понятно, что же вызывало проблемы.
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы