Это для веб-разработчиков. При использовании радиуса границы 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, нам не нужно делать такие вещи, но иногда нам приходится либо соглашаться на несовершенный рендеринг, либо использовать устаревшие методы.
Это часто встречается при наличии фона и границы. Единственный способ исправить это - это иметь два отдельных элемента: один с цветом фона и один с цветом границы с дополнением, равным ширине рамки.
Подробнее см. в этой статье.