it-swarm.com.ru

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

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

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

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?

85
web-tiki

Граница-радиус:

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

Значения в процентах

Обращаясь к спецификациям W3C: Свойство border-radius уровня 3 модуля CSS Backgrounds and Borders это то, что мы можем прочитать о процентных значениях:

Проценты: Обратитесь к соответствующему измерению рамки.

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

  • радиусы по оси X составляют 50% от контейнеров ширина
  • радиусы по оси Y составляют 50% от контейнеров высота

Border-radius in percentage (%) make an Ellipsis

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

Использование one value, отличного от процента для радиуса границы (например, в единицах, связанных с областью просмотра, см ...), всегда приводит к эллипсу с теми же радиусами X/Y. Другими словами, круг.

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

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>

142
web-tiki

Просто разделите первое значение на%, который вы хотите .. поэтому, если вы хотите, чтобы радиус границы составлял 50%, напишите:

border-radius: 25%/50%; 

или другой пример:

border-radius: 15%/30%;

Вы можете легко сделать математику в JS или SASS.

4
CyberJ

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

Если вы хотите использовать относительную единицу, но не хотите использовать эллиптическое поведение %, вы всегда можете использовать em или rem. Например. border-readius: 1em;

0
Raven