Border-Promień w procentach ( % ) i pikselach (px) lub em

Question

Border-Promień w procentach ( % ) i pikselach (px) lub em

Jeśli użyję piksela lub wartości em dla border-radius, promień krawędzi jest zawszeokrągłym łukiem lubkształtem pigułki , nawet jeśli wartość jest większa niż największa strona elementu.

Gdy użyję , promień krawędzi jest eliptyczny i zaczyna się na środku każdego boku elementu, co daje owalny lub eliptyczny kształt :

promień granicy piksela (px) procent ( % ) border-radius

Wartość piksela dla 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>

Wartość procentowa dla border-radius:

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>

Dlaczego promień obramowania w procentach nie działa tak samo jak promień obramowania ustawiony z wartościami pikseli lub em?

72

css css3 css-shapes

Author: web-tiki, 2015-04-30

Source

1 answers

score 129 · Accepted Answer

Border-radius:

Najpierw musisz zrozumieć, że właściwość border-radius przyjmuje 2 wartości. Wartości te są promieniami na osi X / Y ćwiartki elipsy definiującej kształt narożnika.
Jeżeli jest ustawiona tylko jedna z wartości, wtedy druga wartość jest równa pierwszej. Więc {[2] } jest równoważne border-radius:x/x;.

Wartości procentowe

Odwołanie do specyfikacji W3C: moduł CSS tła i obramowania poziom 3 border-radius property Oto co możemy przeczytać o wartościach procentowych:

Procenty: odnoszą się do odpowiedniego wymiaru ramki.

Więc border-radius:50%; definiuje raddi elipsy w ten sposób:

promienie na osi X to 50% pojemników szerokość
promienie na osi Y to 50% wysokości kontenerów

Border-radius w procentach ( % ) zrób elipsę

Piksel i inne jednostki

Użycie jednej wartości inne niż procent dla promienia granicy (em, in, jednostki związane z widokami, cm...) zawsze spowoduje powstanie elipsy o takich samych promieniach X / Y. innymi słowy, okrąg.

Kiedy ustawisz border-radius:999px; promienie okręgu powinny wynosić 999px. ale inna reguła jest stosowana, gdy krzywe nakładają się na siebie zmniejszając promienie okręgu do połowy rozmiaru najmniejszego boku. Więc w twoim przykładzie jest równa połowie wysokości elementu: 50px.

Border-Promień w pikselach (px) tworzą kształt pigułki

W tym przykładzie (z elementem o stałym rozmiarze) można uzyskać ten sam wynik zarówno z px, jak i procentów. Jako element jest 230px x 100px, border-radius: 50%; jest równoważne border-radius:115px/50px; (50% obu stron):

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>