border-radius è una delle prime proprietà CSS che la maggior parte delle persone impara e una delle ultime che comprende appieno Arrotondare tutti e quattro gli angoli di una carta di 12 pixel è facile Quindi un pulsante deve essere una pillola a qualsiasi larghezza, un avatar deve essere un cerchio, una bolla di chat ha bisogno di un angolo acuto e improvvisamente l'ordine stenografico, la differenza tra 50% e 999px, e un raggio che & quot; smette di crescere& quot; tutto importa.
Questa guida spiega come funziona la proprietà dalla specifica in su: cosa significa ogni conteggio di valore, come le percentuali differiscono dai pixel, come i browser scalano raggi troppo grandi, come costruire forme comuni e perché gli angoli arrotondati a volte non vengono visualizzati Gli esempi vengono confrontati con il Generatore di raggi di bordo CSS, che visualizza in anteprima ogni angolo dal vivo e restituisce la scorciatoia valida più breve. È uno dei Strumenti CSS su Toolz.
tl; dr:
border-radiusarrotonda un elemento's angoli Un valore imposta tutti e quattro gli angoli, due valori impostano le coppie in alto a sinistra/in basso a destra e in alto a destra/in basso a sinistra, tre valori impostati in alto a sinistra, poi in alto a destra e in basso a sinistra insieme, quindi in basso a destra e quattro valori eseguiti in senso orario dall'alto a sinistra I raggi dei pixel sono curve fisse; le percentuali sono misurate separatamente rispetto a larghezza e altezza, quindi50%fa un cerchio solo su un quadrato Quando i raggi lungo un lato sommano più del lato, il browser ridimensiona ogni raggio in modo proporzionale Il generatore di raggio di confine gestisce la stenografia per te, lato client, gratuito, senza iscrizione.
Cosa fa la proprietà Border-Radius CSS?
la border-radius proprietà arrotonda gli angoli esterni di un elemento's border box Ogni angolo diventa un quarto di ellisse con un raggio orizzontale e un raggio verticale Quando entrambi i raggi sono uguali, l'angolo è un quarto di cerchio.
È definito nel W3C Modulo Sfondi e Frontiere CSS Livello 3, ed è stato supportato senza prefisso in tutti i principali browser per oltre un decennio, quindi non sono necessari prefissi del fornitore.
L'arrotondamento influisce più della linea di confine Lo sfondo element's è agganciato alla forma arrotondata, box-shadow segue la curva, e nei browser moderni lo stesso vale outline. Il contenuto all'interno dell'elemento non viene ritagliato a meno che non si aggiunga overflow: hidden, che è la ragione più comune per cui gli angoli arrotondati sembrano fallire.
Come funziona la stenografia del raggio di confine?
border-radius è una scorciatoia per quattro proprietà a mano lunga: border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius. Il numero di valori che dai decide a quali angoli si applica ciascun valore.
| Valori | esempio | In alto a sinistra | In alto a destra | In basso a destra | In basso a sinistra |
|---|---|---|---|---|---|
| 1 | border-radius: 16px; |
16 centesimi | 16 centesimi | 16 centesimi | 16 centesimi |
| 2 | border-radius: 24px 8px; |
24 centesimi | 8px | 24 centesimi | 8px |
| 3 | border-radius: 24px 8px 0px; |
24 centesimi | 8px | 0px | 8px |
| 4 | border-radius: 20px 10px 5px 0px; |
20 centesimi | 10 px | 5px | 0px |
Il modello è lo stesso ordine in senso orario utilizzato da margin e padding, partendo dall'angolo in alto a sinistra invece che dal lato in alto I valori mancanti vengono riempiti dal loro partner diagonale: con due valori, copie in basso a destra in alto a sinistra e copie in basso a sinistra in alto a destra Con tre copie in basso a sinistra in alto a destra.
Il generatore inverte questo processo Si imposta ogni angolo con il proprio cursore, e scrive il minor numero di valori che producono la stessa forma:
- Tutti e quattro gli angoli uguali danno un valore.
- In alto a sinistra uguale a in basso a destra e in alto a destra uguale a in basso a sinistra, vengono forniti due valori.
- In alto a destra uguale a in basso a sinistra (ma l'altra diagonale differisce) si ottengono tre valori.
- Qualsiasi altra cosa ne dà quattro.
Una conseguenza sorprende le persone Girare solo l'angolo in alto a sinistra di 20 px e l'output è border-radius: 20px 0px 0px;, non il valore a quattro 20px 0px 0px 0px. Entrambi sono corretti; la forma a tre valori è più breve perché in alto a destra e in basso a sinistra sono entrambi zero. Ogni valore mantiene la sua unità, quindi un angolo zero viene stampato come 0px.
Qual è la differenza tra px e % per il raggio di confine?
Un raggio di pixel è una dimensione assoluta Un raggio percentuale è relativo alla dimensione dell'elemento's e le parti orizzontale e verticale vengono misurate separatamente: il raggio orizzontale rispetto alla larghezza, il raggio verticale rispetto all'altezza.
Su un quadrato, quelli sono lo stesso numero Su un rettangolo, non lo sono, ecco perché 50% trasforma un quadrato in un cerchio ma un rettangolo in un'ellisse.
Prendi la scatola di anteprima del generatore's, che è larga 224 px e alta 160 px:
| valore | Raggio orizzontale | Raggio verticale | Forma |
|---|---|---|---|
16px |
16 centesimi | 16 centesimi | Rettangolo arrotondato, angoli circolari |
50% |
112 px (50% di 224) | 80 px (50% su 160) | Ellisse |
25% |
56 centesimi | 40 centesimi | Rettangolo arrotondato, angoli ellittici |
999px |
999px, scalato a 80px | 999px, scalato a 80px | Pillola con estremità rotonde |
Le altre due unità si comportano come pixel una volta risolte. em è relativo all'elemento's propria dimensione del carattere e rem alla dimensione del carattere di root, quindi 1rem è 16px con impostazioni predefinite del browser Utilizzando em oppure rem consente agli angoli di scalare con le dimensioni del testo, che si adatta ai pulsanti e ai tag che crescono con la loro etichetta.
Nel generatore, i cursori vanno da 0 a 200 per px, da 0 a 50 per % e da 0 a 10 per em e rem, in passaggi di numeri interi. La commutazione dell'unità mantiene i numeri e scambia l'unità, quindi 16px diventa 16%, non un valore convertito.
Perché un grande raggio di confine smette di diventare più rotondo?
Perché la specifica non consente la sovrapposizione delle curve d'angolo Quando la somma dei raggi su un lato è superiore alla lunghezza di side' s, il browser riduce ogni raggio dell'elemento dello stesso fattore finché non si adatta.
la regola di sovrapposizione degli angoli funziona così Per ognuno dei quattro lati, dividi la lunghezza side's per la somma dei due raggi che lo toccano Prendi il più piccolo di quei rapporti, chiamalo f. Se f è minore di 1, moltiplica ogni raggio per f.
Ecco il calcolo per border-radius: 999px nella casella di anteprima 224 x 160:
top and bottom sides: 224 / (999 + 999) = 0.1121
left and right sides: 160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801) = 0.0801
every radius: 999 × 0.0801 ≈ 80px
Ogni angolo finisce con un raggio di 80 px, esattamente la metà dell'altezza di 160 px, quindi le estremità corte diventano semicerchi perfetti La stessa cosa accade a 200 px, la parte superiore del cursore pixel: f è 160 /400 = 0,4, e 200 × 0,4 è di nuovo 80 px Dopo metà del lato più corto, un raggio di pixel smette di cambiare qualsiasi cosa.
Seguono due risultati pratici Un pulsante pillola può utilizzare qualsiasi valore di pixel molto grande, e rimane una pillola a qualsiasi larghezza E poiché il ridimensionamento è proporzionale su tutti e quattro gli angoli, un singolo angolo sovradimensionato riduce anche gli altri Imposta in alto a sinistra a 999 px e lascia il resto a 20 px, e gli angoli 20 px vengono ridimensionati con esso.
Come si fanno forme comuni con bordo-raggio?
La maggior parte delle forme arrotondate nelle interfacce provengono da una manciata di ricette Il generatore ha preimpostazioni per quelle comuni.
| Forma | CSS | banconote |
|---|---|---|
| Aguzza | border-radius: 0px; |
L'impostazione predefinita per la maggior parte degli elementi |
| Sottile | border-radius: 6px; |
Ingressi, piccoli pulsanti |
| Carta | border-radius: 12px; |
Pannelli e schede |
| Arrotondato | border-radius: 16px; |
Il generatore's valore di partenza |
| Pillola | border-radius: 999px; |
Funziona a qualsiasi larghezza tramite scalabilità sovrapposta |
| Cerchio | border-radius: 50%; |
Ha bisogno di uguale larghezza e altezza |
| Foglia | border-radius: 0px 24px; |
Due angoli opposti arrotondati |
| Blob | border-radius: 60% 40%; |
Forma organica da percentuali disuguali |
| Bolla vocale | border-radius: 16px 16px 16px 0px; |
Un angolo acuto vicino all'altoparlante |
| Tab | border-radius: 8px 8px 0px 0px; |
Piano arrotondato, fondo piatto |
Cerchio. Set 50% su un elemento di uguale larghezza e altezza Per gli avatar, aggiungere aspect-ratio: 1 e object-fit: cover sull'immagine in modo che una foto non quadrata non si estenda in un'ellisse.
Pillola. Utilizzare un valore pixel elevato anziché 50%. Su un pulsante largo, 50% produce un'ellisse con estremità dall'aspetto appuntito, perché il raggio orizzontale è la metà della larghezza. 999px viene invece scalato a metà altezza, dando estremità rotonde.
Blob. Il preset 60% 40% imposta in alto a sinistra e in basso a destra al 60% e gli altri due al 40% Sulla casella di anteprima, i raggi orizzontali lungo il bordo superiore sono 134,4 px e 89,6 px, che sommano esattamente 224 px, quindi non si verifica alcun ridimensionamento e le due curve si incontrano senza bordo dritto a sinistra tra di loro I preset possono superare la gamma di cursori: Blob utilizza il 60%, Pill utilizza 999 px e l'output mantiene tali valori finché non si sposta un cursore.
Bolla vocale e scheda. Nessuna delle due forme ha una coppia diagonale corrispondente, quindi entrambe hanno bisogno di tutti e quattro i valori Imposta gli angoli individualmente nel generatore e conferma che non esiste una forma più breve.
Qual è la sintassi slash in border-radius?
Una barra separa i raggi orizzontali dai raggi verticali, quindi ogni angolo può essere un'ellisse non circolare con dimensioni che scegli direttamente.
/* horizontal radii / vertical radii */
.lens {
border-radius: 50% / 20%;
}
/* four horizontal, then four vertical */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
I valori su ciascun lato della barra seguono le stesse regole da uno a quattro della normale stenografia Il generatore Toolz non scrive sintassi slash: imposta un raggio per angolo, che copre cerchi, pillole, carte e macchie Per forme di uova e forme di lenti personalizzate, inizia dal generatore's output e aggiungi la parte slash a mano.
Perché i miei angoli arrotondati non si vedono?
Quando border-radius sembra non fare nulla, la causa è quasi sempre una di queste.
| Riassortimento | Causa | Fix |
|---|---|---|
| Immagine o bambino spunta fuori dagli angoli | I bambini non vengono tagliati per impostazione predefinita | Aggiungi overflow: hidden al genitore arrotondato, o arrotondare anche il bambino |
| Nessun cambiamento visibile | Elemento non ha sfondo, bordo o ombra | Dategli un colore di sfondo o un bordo in modo che la forma sia visibile |
| Gli angoli del tavolo rimangono quadrati | border-collapse: collapse sul tavolo |
maneggiare border-collapse: separate di border-spacing: 0o arrotondare un involucro |
| Circle sembra un ovale | Larghezza e altezza differiscono | Imposta dimensioni uguali o aspect-ratio: 1 |
| Pillola ha estremità appuntite | Utilizzando 50% su un elemento largo |
Usa un grande valore px come 999px |
| Il raggio smette di aumentare | Scala sovrapposta | Previsto; il raggio è limitato alla metà del lato più corto |
| Gli angoli degli elementi interni sembrano più spessi | Il raggio interno è uguale al raggio esterno all'interno dell'imbottitura | Imposta il raggio interno sul raggio esterno meno l'imbottitura |
L'ultimo è sottile Una carta con border-radius: 16px e padding: 8px contenere un'immagine con lo stesso raggio di 16 px sembra irregolare, perché la curva interna dovrebbe essere più stretta Il raggio interno che segue la curva esterna è 16 meno 8, quindi 8 px.
Come si combina il raggio di confine con ombre e gradienti?
Gli angoli arrotondati raramente vengono spediti da soli Una carta di solito ha un'ombra e spesso uno sfondo sfumato, ed entrambi seguono automaticamente la forma arrotondata.
box-shadow traccia la scatola di bordo arrotondata, quindi un'ombra morbida sotto una scheda 12 px ha angoli arrotondati 12 px senza alcun lavoro extra Il generatore ombra box anticipa le ombre su un elemento arrotondato e il guida ombra box spiega i valori di offset, sfocatura e spread dietro di essi.
Anche gli sfondi, compresi i gradienti, sono agganciati alla forma arrotondata Per progettare il riempimento, utilizzare il Generatore di gradienti CSS; il Guida al gradiente CSS attraversa la sintassi Se la dimensione dell'angolo deve scalare con la finestra anziché rimanere fissa, il Generatore di morsetti CSS costruisce un clamp() valore che puoi usare come raggio, ad esempio una scheda che è 8px sui telefoni e 20px sugli schermi larghi.
Utilizzando il generatore, passo dopo passo
- Scegli un preset come Card, Pill, Circle o Blob, o iniziare dagli angoli predefiniti 16px.
- Regola angoli. L'interruttore angolare viene impostato per impostazione predefinita su Indipendente, dove ogni cursore sposta solo il proprio angolo Passalo a Collegato per spostarli tutti e quattro insieme.
- Scegliere un'unità: px, %, em o rem.
- Controlla l'anteprima. La casella gradiente si aggiorna mentre trascini, incluso il ridimensionamento delle sovrapposizioni su valori di grandi dimensioni.
- Copia il CSS. Il pulsante Copia CSS copia per intero
border-radius:dichiarazione nella sua forma più breve.
Tutto funziona lato client: l'anteprima e il codice sono generati da JavaScript nel tuo browser, non viene caricato nulla e la pagina continua a funzionare offline una volta caricata Quando sei pronto, aprire il generatore di raggio di confine, imposta i tuoi angoli e incolla la dichiarazione direttamente nel tuo foglio di stile.
