Generatore di raggi di bordo CSS

Il generatore di raggi di confine CSS è un editor visivo per la proprietà CSS border-radius Trascini un cursore per ogni angolo, guardi un elemento di anteprima in tempo reale e copi l'esatto CSS che produce: nessun valore di pixel indovinante e ricarica la pagina.

La proprietà del raggio di bordure sembra semplice ma ha una scorciatoia compatta che fa scattare le persone: un valore arrotonda tutti e quattro gli angoli, due valori impostano le due diagonali e quattro valori vanno in senso orario dall'alto a sinistra. Questo strumento consente di impostare ogni angolo in modo indipendente e quindi emettere automaticamente la stenografia equivalente più breve, in modo che il tuo CSS rimanga pulito.

Tutto funziona nel tuo browser. Inizia da un preset come carta, pillola, cerchio o blob, perfeziona ogni angolo, cambia l'unità tra i pixel e le percentuali e copia la dichiarazione. Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.

Le percentuali e i pixel si comportano in modo diverso su tutto ciò che non è quadrato, e la differenza sorprende le persone Un raggio di pixel è la stessa curva su ogni angolo, mentre una percentuale viene misurata contro ogni asse separatamente, quindi il 50% su una scatola larga dà un'ellisse piuttosto che un cerchio Quella è la proprietà che trasforma un rettangolo in una pillola o in una forma di lente La specifica ti protegge anche dalla geometria impossibile: quando i raggi lungo un bordo sommano più della lunghezza di quel bordo, il browser ridimensiona ogni raggio sull'elemento proporzionalmente anziché sovrapporlo, quindi un valore elevato smette silenziosamente di crescere L'output utilizza la scorciatoia valida più breve, motivo per cui quattro angoli uguali collassano in un singolo numero.