Utilizzando le proprietà di border-radius e background-image, è possibile creare splendidi cerchi CSS con colori gradienti. Vediamo il codice relativo.
1 2 3 4 5 6 7 8 9 |
.circle { border-radius: 50%; width: 200px; height: 200px; background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange); background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); /* width and height can be anything, as long as they're equal */ } |
Il risultato sarà:
pixolo ads