In che modo questo CSS produce un cerchio?


206

Questo è il CSS:

div {
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}

Come produce il cerchio qui sotto?

Inserisci qui la descrizione dell'immagine

Supponiamo che se una larghezza del rettangolo è di 180 pixel e l'altezza è di 180 pixel, sembrerebbe così:

Inserisci qui la descrizione dell'immagine

Dopo aver applicato il bordo-raggio di 30 pixel, sembrerebbe così:

Inserisci qui la descrizione dell'immagine

Il rettangolo sta diventando più piccolo, cioè quasi scompare se la dimensione del raggio aumenta.

Quindi, in che modo un bordo di 180 pixel height/width-> 0pxdiventa un cerchio con un raggio di 180 pixel?


14
È un oggetto 0x0 con un bordo di 180 pixel attorno ad angoli arrotondati. Quindi gli angoli arrotondati sono quadranti di un cerchio.
Kaz,

ho una domanda stupida nella mia mente perché vuoi fare circlecon il bordo ??? possiamo facilmente fare circlecon widthe heightquindi perché facciamo conborder
The Mechanic

7
Cordiali saluti, per la creazione di cerchi, utilizzare <code> border-radius: 50% </code> - rende più semplice regolare solo la larghezza / altezza quando si ottiene il layout corretto.
David Gilbertson,

Sì signore, è una matematica
Medet Tleukabiluly

Risposte:


372

In che modo un bordo di 180 pixel con altezza / larghezza-> 0px diventa un cerchio con un raggio di 180 pixel?

Riformuliamolo in due domande:

Dove fare widtheheight in realtà si applicano?

Diamo un'occhiata alle aree di un tipico riquadro ( fonte ):

W3C: aree di una scatola tipica

Il heightewidth si applicano solo sui contenuti, se il modello casella corretta è in uso (senza quirks mode, nessun vecchio Internet Explorer).

Dove border-radius applica?

Il border-radius applica al limite. Se non c'è né riempimento né bordo, ciò influirà direttamente sul bordo del contenuto, risultando nel terzo esempio.

Cosa significa questo per il nostro raggio-bordo / cerchio?

Ciò significa che le tue regole CSS risultano in una casella che consiste solo di un bordo. Le tue regole affermano che questo bordo dovrebbe avere una larghezza massima di 180 pixel su ogni lato, mentre d'altra parte dovrebbe avere un raggio massimo della stessa dimensione:

Immagine di esempio

Nella foto, il contenuto reale del tuo elemento (il piccolo punto nero) è davvero inesistente. Se non ne hai fatto richiesta, finiresti border-radiuscon la casella verde. Ilborder-radius ti dà il cerchio blu.

Diventa più facile capire se si applica l' border-radius unico a due angoli :

#silly-circle{
    width:0; height:0;
    border: 180px solid red;
    border-top-left-radius: 180px;
    border-top-right-radius: 180px;
}

Bordo applicato solo su due angoli

Poiché nel tuo esempio le dimensioni e il raggio di tutti gli angoli / bordi sono uguali, ottieni un cerchio.

Ulteriori risorse

Riferimenti

dimostrazioni

  • Apri la demo di seguito, che mostra come border-radiusinfluisce sul bordo (pensa alla casella blu interna come alla casella del contenuto, al bordo nero interno come al bordo dell'imbottitura, allo spazio vuoto come all'imbottitura e al gigantesco bordo rosso come al, beh, confine). Le intersezioni tra la casella interna e il bordo rosso influirebbero generalmente sul bordo del contenuto.


Non credo che css3-background faccia alcun riferimento a css3-box (css3-box è in attesa di riscrittura).
BoltClock

@BoltClock: ho pensato che css3-box avrebbe definito i bordi . C'è solo un riferimento a css2.1-box nell'introduzione (non normativo), e l'immagine fornita è anche lì, quindi css3-box non è davvero necessario per capire border-radius(quali cambiamenti ci si aspetta dalla riscrittura di css3- scatola?).
Zeta,

@Zeta ho una domanda stupida nella mia mente perché vuoi fare circlecon il bordo ??? possiamo facilmente fare circlecon widthe heightallora perché lo facciamo conborder
The Mechanic

1
@Sarfaraz: dai un'occhiata alla domanda del PO: "Allora, come fa un bordo di 180px a height/width-> 0pxdiventare un cerchio con un raggio di 180px?" . Ho semplicemente risposto alla domanda. Esistono altri modi per creare una cerchia, ma OP era interessato solo al funzionamento di questo metodo specifico.
Zeta,

@Zeta: Non sono sicuro di cosa cambierà esattamente, ma dato che WD non è stato aggiornato da 6 anni, sospetto che sarà così. So che la sezione 11 ( overflowfamiglia di proprietà) ora vive nel suo modulo, css-overflow-3, ma ciò non si è ancora riflesso nell'ED. Vedrai molti problemi nell'ED
BoltClock

94

dimostrazione

Esaminiamo la domanda in un altro modo con questa dimostrazione illustrata:

Vediamo prima come viene prodotto il raggio di confine?

Per produrre il raggio ci vogliono due lati del suo bordo. Se imposti il ​​raggio del bordo su 50 pixel, occorrerebbero 25 pixel da un lato e 25 pixel da un altro lato.

Inserisci qui la descrizione dell'immagine

E prendendo 25 pixel da ogni lato produrrebbe in questo modo:

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 50px 0 0;
}

Inserisci qui la descrizione dell'immagine

Ora vedi quanto può richiedere al massimo un quadrato per applicare su un angolo?

Può richiedere fino a 180 pixel dall'alto e 180 pixel da destra. Quindi produrrebbe così:

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 0 0;
}

Inserisci qui la descrizione dell'immagine

E vedi come si produce se impostiamo un valore non uguale di raggio?

Supponiamo che se si applica il raggio del bordo solo a due angoli in modo diseguale:

  • angolo in alto a destra a 180 pixel

  • angolo inferiore destro a 100 pixel

Quindi ci vorrebbe

  • in alto a destra: 90 pixel dall'alto e 90 pixel da destra

  • in basso a destra: 50 pixel da destra e 50 pixel da sotto

Quindi produrrebbe così

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 100px 0;
}

Inserisci qui la descrizione dell'immagine

Quanto massimo del suo bordo può richiedere il quadrato da applicare su tutti i lati? E vedi come produce un cerchio?

Può richiedere fino a metà della dimensione del bordo, ovvero 180 pixel / 2 = 90 pixel. Quindi produrrebbe un cerchio come questo

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 180px;
}

Inserisci qui la descrizione dell'immagine

Perché è necessaria solo la metà del quadrato per applicare su tutti i lati?

Perché tutti gli angoli devono impostare il loro valore di raggio allo stesso modo.

Prendendo parti uguali del suo bordo, produce un cerchio.


7
In realtà la versione attuale di questa risposta porta un po 'troppo lontano. La domanda è semplicemente "come fa questo CSS a creare un cerchio", non "come funziona il raggio di frontiera in generale", quindi mentre tecnicamente corretto è un po 'troppo. Inoltre è possibile riformattare la domanda e inserire il codice effettivo negli ambienti di codice.
Zeta

3

I bordi sono la casella esterna di qualsiasi contenuto e se si applica il raggio su di esso, produrrà semplicemente il bordo circolare.


3

Penso che inizialmente crei un rettangolo con height and width = 180pxe poi crei una curva con un raggio dato come 30pxcon ogni angolo. Quindi inizia bordercon dato radius.


1

Entrambi .ae.b daranno l'output identico.

D. Perché l'ho usato width: 360px; height: 360px; ?

A. border: 180px solid red;in .aopere comeborder-width: 180px 180px 180px 180px; /* Top Right Bottom Left */ .

Spero che questo violino ti aiuti a capire il concetto.

.a{
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}
.b{
    background:red;
    width: 360px;
    height: 360px;
    border-radius: 180px;
}

9
Eh? "Come funziona .a?" "Ecco un confronto tra .a e .b" Non sono sicuro di cosa stai cercando di dire qui.
BoltClock
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.