Избегайте эллиптической формы в пограничном радиусе CSS

Использование CSS-графа границ для прямоугольных divs создает эллиптические углы вместо закругленных углов. Как получить идеальные закругленные углы для прямоугольных div?

+5
источник поделиться
3 ответа

image from MDN

Формально синтаксис свойства border-radius принимает 2 значения для каждого угла: вертикальный радиус и горизонтальный радиус (разделенные косой чертой). Следующая строка создаст эллиптический радиус границы, аналогичный третьему изображению.

border-radius: 5px/10px;

Обычно мы указываем только одно значение. В этом случае это значение используется как в вертикальном, так и в горизонтальном радиусах. Следующая строка создаст круговой радиус границы, аналогичный второму изображению выше.

border-radius: 10px;

Использование процентов

Сеть разработчиков Mozilla определяет возможные типы значений для этого свойства следующим образом:

< длинa >
  Обозначает размер радиуса окружности или полумассивные и полуосновные оси многоточия. Он может быть выражен в любой единице, разрешенной типами данных CSS. Отрицательные значения недействительны.

< процент >
  Обозначает размер радиуса окружности или полумассивные и полуосновные оси многоточия с использованием процентных значений. Процент для горизонтальной оси относится к ширине коробки, проценты для вертикальной оси относятся к высоте коробки. Отрицательные значения недействительны.

Использование одного значения для создания кругового радиуса отлично, когда мы используем абсолютные единицы length, такие как пиксели или ems, но усложняется, когда мы используем проценты. Поскольку однозначное использование этого свойства является синонимом использования одного и того же значения дважды, следующие две строки эквивалентны; однако они не обязательно будут создавать круговой радиус границы.

border-radius: 50%;
border-radius: 50%/50%;

Эти строки говорят, что "создать эллипс или круг, вертикальный радиус которого равен 50% высоты элемента, а радиус которого равен 50% ширины элемента и использовать его как радиус границы". Если элемент имеет ширину 200 пикселей и высоту 100 пикселей, это приводит к появлению эллипса, а не круга.


Решение

Если вам нужен круговой радиус радиуса, проще всего использовать абсолютные единицы измерения (например, пиксели или ems или что-то кроме процента), но иногда это не подходит для вашего прецедента, и вы хотите использовать проценты, Если вы знаете соотношение сторон содержащего элемента, вы все равно можете! В приведенном ниже примере, поскольку мой элемент в два раза шире, чем высокий, я уменьшил радиус по горизонтали в два раза.

#rect {
  width: 200px;
  height: 100px;
  background: #000;
  border-radius: 25%/50%;
}
<div id="rect"></div>
+5
источник

Если вы используете процент, это может вызвать растягивание/эллиптический внешний вид. Вы можете попытаться обозначить единицы в px для большего количества настраиваемого округленного вида.

+3
источник

border-radius: 9999px создает "идеальные углы 1/4 круга", поэтому вы можете создавать круги css с этим свойством. Иногда они не выглядят так, как будто они идеально круглые, но это оптическая иллюзия. Если это вас беспокоит, вы можете попытаться подражать эффекту чем-то вроде border-radius: 9px / 8px

border-radius: 50% будет, с другой стороны, создавать некруглые дуги, если ваш div не является квадратным. Опять же, вы можете переопределить поведение, которое вам не нравится, указав отдельные радиусы для оси x и y, как border-radius: 10% / 20%.

+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос