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

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

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

pixel (px) border radiuspercent (%) border-radius

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

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 ответов


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

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

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

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

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

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

  • радиусы на ось 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>