Utilizza gradienti conici per creare un bordo freddo
bookmark_borderbookmark
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
I gradienti conici possono essere utilizzati per creare effetti interessanti, come questo bel bordo.
Questo CodePen creato da Adam
Argyle, originariamente condiviso tramite questo
tweet su Twitter,
mostra come utilizzare un gradiente conico per
creare un bordo.
.conic-gradient-border {
border: 25px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(100 100% 60%),
hsl(200 100% 60%),
hsl(100 100% 60%)
);
}
Terry Mun ha forkato il codepen di Adam e creato questo
CodePen. Passa il mouse sopra l'elemento e vedrai il cambiamento di gradiente, grazie a un po' di JavaScript che aggiorna una proprietà CSS personalizzata che memorizza l'angolo di rotazione.
Questi esempi utilizzano la proprietà
border-image-source
. Questa proprietà imposta l'immagine di origine utilizzata per creare il bordo di un elemento. Come per le altre proprietà che accettano un valore immagine, è valido anche qualsiasi tipo di gradiente CSS.
border-image-source
Gradiente conico
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2022-05-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2022-05-27 UTC."],[],[]]