Пограничный ход CSS 1px обрывается вокруг граничного радиуса

Это для веб-разработчиков. При использовании радиуса границы 1px по кругу или квадрату с действительно закругленными углами удар начинает разрываться. Если бы мы изменили его на 2px, стало бы лучше и лучше, чем больше px мы добавим. Но есть ли способ исправить эту проблему с помощью штриха 1px?

background: rgba(32, 32, 32, .9);
height: 30px;
width: 30px;
border: 1px solid white;
border-radius: 20px;
:hover {
 height: 300px;
 width: 200px;
}

Изображения прилагаются!

enter image description here

Ответы

Ответ 1

add box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white;, который даст вам сглаживание, которое вы ищете.

Ответ 2

К сожалению, вы ничего не можете с этим поделать. Это до браузера, чтобы определить, как отображать субпиксели, составляющие изогнутую границу 1px. Некоторые браузеры будут хорошо сглаживать, другие не будут.

Единственное надежное решение - использовать изображения, которые так... 90-х годов. Или что-то XD Point, нам не нужно делать такие вещи, но иногда нам приходится либо соглашаться на несовершенный рендеринг, либо использовать устаревшие методы.

Ответ 3

Это часто встречается при наличии фона и границы. Единственный способ исправить это - это иметь два отдельных элемента: один с цветом фона и один с цветом границы с дополнением, равным ширине рамки.

Подробнее см. в этой статье.