Generatore di bordi animati in CSS con gradiente

Un bordo arcobaleno rotante sembra semplice finché non provi effettivamente a realizzarlo in CSS: animare un angolo all'interno di conic-gradient() con una semplice proprietà personalizzata non produce nulla di utile, perché il browser non sa che il valore è un angolo e non può interpolare tra 0deg e 360deg — semplicemente salta. Questo generatore utilizza la vera soluzione, l'API CSS Properties and Values: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` comunica al browser esattamente che tipo di valore contiene la proprietà personalizzata, ed è questo che sblocca un'interpolazione fluida e accelerata via GPU in una regola @keyframes.

L'anello stesso è uno pseudo-elemento ::before dimensionato più grande del riquadro (con un inset pari al negativo della larghezza del bordo) e con lo sfondo impostato su `conic-gradient(from var(--border-angle), ...)` che ritorna al primo colore in modo che la scansione non abbia giunture visibili. Una maschera fa poi il vero lavoro di sagomatura: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` mantiene solo la differenza a forma di anello tra il padding-box e il content-box, scartando il rettangolo a gradiente solido ovunque altrove. La vecchia proprietà `-webkit-mask-composite: xor` di Safari esegue la stessa identica operazione e viene fornita insieme alla proprietà standard, così l'effetto viene visualizzato in modo uniforme invece di fallire silenziosamente su un motore.

Il supporto per il border-radius non è un ripensamento aggiunto sopra — `border-radius: inherit` dello pseudo-elemento significa che qualsiasi raggio imposti sul riquadro viene automaticamente trasferito all'anello, quindi un pulsante a forma di pillola o una card arrotondata ottengono un bordo luminoso arrotondato invece di bordi dritti che fuoriescono dagli angoli curvi. Provalo dal vivo: trascina lo slider del raggio da un rettangolo netto a una pillola completa e guarda l'anello seguire la forma a ogni passo, che è il dettaglio che distingue una vera implementazione di questa tecnica da uno screenshot fasullo.

Tutto il resto sulla pagina si riflette direttamente nel codice generato: lo slider della larghezza è lo spessore dell'anello e l'inset/padding dello pseudo-elemento, lo slider della durata è l'animation-duration delle @keyframes, l'interruttore di direzione semplicemente inverte il segno dell'angolo finale del fotogramma chiave (+360deg o -360deg), e ogni tappa di colore è una voce separata da virgole all'interno della chiamata a conic-gradient(). L'intera cosa gira nel tuo browser senza immagini, senza cicli di animazione guidati da JavaScript e senza servizi esterni — copia il blocco CSS e continuerà a ruotare ovunque lo incollerai.