Raggio del bordo in percentuale (%) e pixel (px) o em


124

Se utilizzo un valore pixel o em per il raggio del bordo, il raggio del bordo è sempre un arco circolare o una forma a pillola anche se il valore è maggiore del lato più grande dell'elemento.

Quando utilizzo le percentuali , il raggio del bordo è ellittico e inizia al centro di ciascun lato dell'elemento risultando in una forma ovale o ellittica :

raggio del bordo pixel (px)percentuale (%) border-radius

Valore pixel per border-radius:

Valore percentuale per border-radius:

Perché il raggio del bordo in percentuale non funziona allo stesso modo del raggio del bordo impostato con i valori pixel o em?

Risposte:


181

Raggio del bordo:

Innanzitutto, è necessario capire che la proprietà border-radius accetta 2 valori. Questi valori sono i raggi sull'asse X / Y di un quarto di ellisse che definisce la forma dell'angolo.
Se è impostato solo uno dei valori, il secondo valore è uguale al primo. Quindi border-radius: xè equivalente a border-radius:x/x;.

Valori percentuali

Facendo riferimento alle specifiche W3C: CSS Backgrounds and Borders Module Level 3 border-radius property questo è ciò che possiamo leggere riguardo ai valori percentuali:

Percentuali: fare riferimento alla dimensione corrispondente del riquadro del bordo.

Quindi border-radius:50%;definisce i raddi dell'ellisse in questo modo:

  • i raggi sull'asse X sono il 50% della larghezza dei contenitori
  • i raggi sull'asse Y sono il 50% dell'altezza dei contenitori

Il raggio del bordo in percentuale (%) crea un'ellissi

Pixel e altre unità

L'uso di un valore diverso da una percentuale per il raggio del bordo (em, in, unità relative alla vista, cm ...) risulterà sempre in un'ellisse con gli stessi raggi X / Y. In altre parole, un cerchio .

Quando imposti border-radius:999px;i raggi del cerchio dovrebbero essere 999px. Ma un'altra regola viene applicata quando le curve si sovrappongono riducendo i raggi del cerchio a metà delle dimensioni del lato più piccolo. Quindi nel tuo esempio è uguale alla metà dell'altezza dell'elemento: 50px.

Il raggio del bordo in pixel (px) crea una forma a pillola


Per questo esempio (con un elemento di dimensione fissa) puoi ottenere lo stesso risultato sia con px che con le percentuali. Poiché l'elemento è 230px x 100px, border-radius: 50%;è equivalente a border-radius:115px/50px;(50% di entrambi i lati):

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>


6
Ottima risposta. È un peccato che i valori del raggio percentuale siano calcolati separatamente per larghezza e altezza. Significa che non posso ottenere angoli circolari che si adattano alle dimensioni dell'oggetto, senza conoscere le proporzioni dell'oggetto. Non sarebbe bello se la percentuale fosse applicata alla maggiore delle dimensioni degli oggetti?
Chris Dennis

4
@ChrisDennis Questo non è vero. Come ha detto OP, puoi semplicemente usare border-radius: 999px;. In questo modo ottieni i tuoi angoli circolari e assicurati che si adattino al tuo elemento
Gust van de Wal,

9
Ma potrei non volere estremità semicircolari alla scatola. Vorrei essere in grado di specificare il raggio x come, diciamo, il 10% della larghezza del riquadro e il raggio y uguale a raggio x.
Chris Dennis

4
Ehi, hai fatto altri post auto-rispondenti come questo? Apprezzerei leggerli.
Ced

3
Ma ciò che funziona effettivamente con la percentuale è: border-radius: 50%/100%(Testato in Chrome 60 + 61)
denns

6

Basta dividere il primo valore per la% che vuoi .. quindi se vuoi un raggio del bordo del 50%, scrivi:

border-radius: 25%/50%; 

o un altro esempio:

border-radius: 15%/30%;

Puoi facilmente fare i conti in js o SASS.


1
Non è solo il 25% della larghezza e il 50% dell'altezza? Non è la stessa cosa del 50% dell'altezza in entrambe le direzioni X e Y.
mpen

che diavolo è questa sintassi! Funziona! Non ho mai saputo che esistesse, è carino!
Uri Kutner,

È solo matematica fratello
CyberJ

1
Non so che tipo di matematica hai fatto, ma non è "solo matematica". È una scorciatoia appositamente definita per border-radius che non ha nulla a che fare con la divisione aritmetica. w3.org/TR/css-backgrounds-3/#border-radius
MI Wright
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.