Evita la forma ellittica nel raggio del bordo CSS

Question

L'utilizzo di CSS con margini di bordo per div rettangolari produce angoli ellittici anziché angoli arrotondati. Come posso ottenere angoli arrotondati perfetti per le immersioni rettangolari?

Answer 1

Formalmente, la sintassi per la proprietà border-radius accetta 2 valori per ogni angolo: un raggio verticale e un raggio orizzontale (separati da una barra). La seguente riga creerebbe un raggio-bordo ellittico simile alla terza immagine sopra.

border-radius: 5px/10px; 

In genere viene specificato solo un valore. In questo caso, quel valore viene usato sia come raggio verticale che orizzontale. La seguente riga creerebbe un raggio di bordo circolare simile alla seconda immagine sopra.

border-radius: 10px; 

---

Uso Percentuali

Il Mozilla Developer's Network definisce i possibili tipi di valori per questa proprietà come segue:

< lunghezza>
Indica le dimensioni del cerchio raggio o semi-maggiore e s assi emi-secondari dei puntini di sospensione. Può essere espresso in qualsiasi unità consentita dai tipi di dati CSS. I valori negativi non sono validi.

< percentuale>
Indica la dimensione del raggio del cerchio, o le semi-maggiori e minori semi-assi del ellissi, utilizzando valori percentuali. Le percentuali per l'asse orizzontale si riferiscono alla larghezza della scatola, le percentuali per l'asse verticale si riferiscono all'altezza della scatola. I valori negativi non sono validi.

Utilizzando un unico valore per creare un raggio circolare è bene quando stiamo usando assoluti length unità come pixel o SME, ma diventa più complicato quando stiamo usando percentuali. Poiché l'utilizzo a valore singolo di questa proprietà è sinonimo di utilizzare lo stesso valore due volte, le due righe seguenti sono equivalenti; tuttavia, questi non necessariamente creano un raggio di bordo circolare.

border-radius: 50%; 
border-radius: 50%/50%; 

Queste linee dire "creare un'ellisse o un cerchio il cui verticale raggio è pari al 50% dell'altezza dell'elemento e il cui raggio orizzontale pari al 50% della larghezza dell'elemento, e utilizzarlo come border- raggio.". Se l'elemento è largo 200 pixel e alto 100 pixel, questo risulta in un'ellisse piuttosto che in un cerchio.

---

Soluzione

Se si desidera un border-radius circolare, la cosa più semplice da fare è usare unità di misura assolute (come pixel o SME o nulla oltre a percentuali), ma a volte che doesn' Adatta al tuo caso d'uso e vuoi usare le percentuali. Se conosci l'aspect ratio dell'elemento contenitore, puoi ancora! Nell'esempio seguente, poiché il mio elemento è due volte più largo dell'altezza, ho ridimensionato il raggio orizzontale a metà.

#rect { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #000; 
 
    border-radius: 25%/50%; 
 
}

<div id="rect"></div>

Answer 2

border-radius: 9999px produce angoli "1/4 di cerchio perfetti", ecco perché è possibile creare cerchi css con questa proprietà. A volte non sembrano essere degli angoli perfettamente rotondi, ma è un'illusione ottica. Se questo ti infastidisce, puoi provare a imitare l'effetto con qualcosa come border-radius: 9px/8px

border-radius: 50%, d'altra parte, produrre archi non circolari se il tuo div non è quadrato. Di nuovo, puoi ignorare il comportamento che non ti piace specificando i raggi separati per l'asse x e y come border-radius: 10%/20%.

Answer 3

Se si utilizza una percentuale, è possibile che si verifichi un aspetto allungato/ellittico. Potresti provare a designare le unità in px per avere un aspetto arrotondato personalizzato.