Граница-радиус в процентах ( % ) и пикселях (px) или em

если я использую пиксель или em значение для граничного радиуса радиус ребра всегда равен дуги или формы таблетки даже если значение больше, чем самая большая сторона элемента.

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

значение пиксела для границы-радиуса : 

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }
<div>border-radius:999px;</div>

процентное значение для границы радиуса:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}
<div>border-radius:50%;</div>

Почему радиус границы в процентах не действует так же, как радиус границы, установленный с пикселями или значениями em?

1 72
css css3 css-shapes

1 ответ:

границы-радиус :

во-первых, вы должны понимать, что свойство border-radius принимает 2 значения. Эти значения представляют собой радиусы на оси X/Y четверти эллипса, определяющие форму угла.
Если задано только одно из значений, то второе значение равно первому. Так что border-radius: x эквивалентно border-radius:x/x;.

значения проценты

ссылаясь на спецификации W3C:CSS фоны и границы модуль Уровень 3 свойство border-radius вот что мы можем прочитать относительно процентных значений:

проценты: см. соответствующий размер поля границы.

так border-radius:50%; определяет Радди эллипса таким образом:

  • радиусы на ось X это 50% контейнеров ширина
  • радиусы на ось Y 50% из контейнеров высота

Border-radius in percentage (%) make an ellipsis

пиксель и другие единицы

используя одно значение кроме процента для радиуса границы (em, in, единицы измерения, связанные с видовым окном, см...) всегда будет приводить к эллипсу с одинаковыми радиусами X/Y. другими словами, круг.

при установке border-radius:999px; радиусы окружности должны быть 999px. но другое правило применяется, когда кривые перекрытие уменьшение радиусов окружности до половины размера наименьшей стороны. Так что в вашем примере он равен половине высоты элемента : в 50px.

Border-radius in pixels (px) make a pill shape

в этом примере (с элементом фиксированного размера) вы можете получить тот же результат как с px, так и с процентами. Как элемент 230px x 100px,border-radius: 50%; эквивалентно border-radius:115px/50px; (50% с обеих сторон) :

div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}
<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>
129