Border-радиус в процентах ( % ) и пикселях (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 ответов
границы-радиус :
во-первых, вам нужно понять, что свойство 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% из контейнеров высота
пиксель и другие единицы
используя одно значение кроме процента для радиуса границы (em, in, единицы, связанные с окном просмотра, см...) всегда приведет к эллипсу с одинаковыми радиусами X/Y. другими словами, круг.
при установке border-radius:999px;
радиусы круга должны быть 999px. но другое правило применяется, когда кривые перекрытие уменьшение радиуса круга до половины размера наименьшей стороны. Таким образом, в вашем примере он равен половине высоты элемента : 50px.
в этом примере (с элементом фиксированного размера) вы можете получить тот же результат как с 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>