È possibile creare un bordo sfumato su un CERCHIO con css3?

Question

Ho un'immagine di sfondo a forma di cerchio. Gli ho dato un bordo giallo. Vorrei cambiare il bordo in un gradiente dal giallo al bianco. Ho visto molti esempi con bordi quadrati ma nessuno applicato ai cerchi. Ecco il mio codice:

.Profileimage{ 
 
    background-image: url("images/profilePic.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    overflow:hidden; 
 
    -webkit-border-radius:50px; 
 
    -moz-border-radius:50px; 
 
    border-radius:50%; 
 
    width:100px; 
 
    height:100px; 
 
    border: 5px solid rgb(252,238,33); 
 
}

<div class="Profileimage"></div>

Grazie !!

Answer 1

Forse qualcosa del genere?

.Profileimage{ 
    position: relative; 
    background: linear-gradient(rgb(252,238,33), rgb(255,255,255)); 
    -webkit-border-radius:50px; 
    -moz-border-radius:50px; 
    border-radius:50%; 
    width:100px; 
    height:100px; 
} 
.Profileimage:after{ 
    position: absolute; 
    display: block; 
    top: 5px; 
    left: 5px; 
    width: 90px; 
    height: 90px; 
    content: ""; 
    background-color: #fff; 
    background-image: url("images/profilePic.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    border-radius: 50%; 
    overflow: hidden; 
} 

Non sono sicuro se è quello che stai cercando, ma si può solo impostare lo sfondo per il gradiente, e quindi posizionare un elemento sopra le righe (qui sto usando il 'dopo' selettore pseudo)

Fiddle: http://jsfiddle.net/6ue88pu6/1/

Answer 2

Questa è la vostra risposta:

#cont{ 
 
    background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%); 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 1000px; 
 
    padding: 10px; 
 
} 
 

 
#box{ 
 
    background: black; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 1000px; 
 
}

<div id="cont"> 
 
    <div id="box"></div> 
 
</div>

Answer 3

Vedo che questa domanda è già vecchia, ma ho appena avuto lo stesso problema e ho potuto risolverlo. Il trucco è quello di avvolgere il tuo div in un altro div.

.gradient-wrapper { padding: 10px; border-radius: 50%; display: inline-block; 
 
    background: yellow; // As fallback for browsers which do not support gradient 
 
    background: -webkit-linear-gradient(yellow, white); 
 
    background: -o-linear-gradient(yellow, white); 
 
    background: -moz-linear-gradient(yellow, white); 
 
    background: linear-gradient(yellow, white); 
 
} 
 

 
#maincircle { width: 100px; height: 100px; background: #424242; border-radius: 50%; }

<div class="gradient-wrapper"> 
 
    <div id="maincircle"> 
 
    &nbsp; 
 
    </div> 
 
</div>

Risultato:

Spero che questo ha aiutato!