Пограничный ход 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; } 

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

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

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

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

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

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

См. Эту статью для лучшего объяснения.