Border Radius Generator
Generate border radius
Generate border radius Funziona localmente nel tuo browser
border-radius: 12px;
About the
Il generatore di raggio del bordo imposta i quattro angoli di un riquadro in modo indipendente, con un'anteprima dal vivo e ti fornisce il CSS. L'ordine della abbreviazione è quello che tutti dimenticano: è in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra, procedendo in senso orario da in alto a sinistra. Un valore si applica a tutti e quattro gli angoli, due valori si applicano alle coppie diagonali e quattro valori si applicano a turno a ciascun angolo. Quando tutti e quattro corrispondono, lo strumento emette il formato a valore singolo, che è quello effettivamente desiderato per la maggior parte del tempo.
Where people use the
- Corrispondenza di un raggio a una specifica di progettazione senza indovinare i valori dei pixel.
- Arrotondare solo gli angoli superiori di una carta o di un modale.
- Modellazione di un pulsante pillola, che ha un raggio pari alla metà dell'altezza dell'elemento.
- Trovare il raggio che trasforma un avatar quadrato in un cerchio.
How to use the
- 1
Trascina un cursore d'angolo
Ogni angolo ha il proprio cursore da 0 a 150 pixel. La casella di anteprima si arrotonda mentre la sposti.
- 2
Mantieni gli angoli collegati o scollegali
Con Link attivo, spostando qualsiasi cursore si spostano tutti e quattro insieme. Spegnilo per modellare i singoli angoli, così creerai la coda di un fumetto o la forma di una foglia.
- 3
Leggi il CSS
Se tutti e quattro corrispondono, ottieni la scorciatoia a valore singolo. Se differiscono, ottieni la forma completa a quattro valori in ordine orario.
- 4
Considera invece una percentuale
Un raggio del 50% su un elemento quadrato dà un cerchio. Scambia l'unità px con una percentuale nel tuo foglio di stile se è ciò di cui hai bisogno.
Suggerimenti e migliori pratiche
- Utilizza le percentuali quando l'elemento viene ridimensionato, i pixel quando non lo fa.
- Un pulsante pillola non ha un raggio fisso; è alto la metà, quindi 9999px è la risposta pigra ma robusta.
- Mantieni il raggio coerente in un set di componenti; mescolare 4px, 6px e 8px sembra accidentale.
Domande frequenti
In che ordine sono i quattro valori?
In senso orario dall'alto a sinistra: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra. Un utile mnemonico è che inizia dove inizi a leggere e gira come il quadrante di un orologio.
Cosa significano due o tre valori?
Due valori impostano le diagonali: il primo è in alto a sinistra e in basso a destra, il secondo è in alto a destra e 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.
Come faccio a creare un cerchio?
Usa il 50% su un elemento che è già quadrato. L'uso dei pixel dà un cerchio solo se il raggio è uguale alla metà della larghezza, il che si interrompe nel momento in cui l'elemento viene ridimensionato.
Posso arrotondare gli angoli in modo diverso in orizzontale e in verticale?
La sintassi completa consente un raggio ellittico scritto come valori orizzontali, una barra, quindi valori verticali. Questo strumento emette la forma uniforme più semplice, quindi aggiungi manualmente la versione con barra se hai bisogno di quella forma.
Perché il mio angolo arrotondato è tagliato?
Perché il contenuto secondario non viene ritagliato nella casella arrotondata. Aggiungi l'overflow nascosto all'elemento, altrimenti l'immagine o lo sfondo al suo interno mostreranno comunque angoli squadrati.