Ist es möglich, einen Gradientenrahmen auf einem CIRCLE mit CSS3 zu erstellen?

Question

Ich habe ein Hintergrundbild in Form eines Kreises. Habe ihm eine gelbe Grenze gegeben. Ich möchte die Grenze zu einem Farbverlauf von gelb zu weiß ändern. Ich habe viele Beispiele mit quadratischen Rahmen gesehen, aber keine auf Kreise angewendet. Hier ist mein Code:

.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>

Dank !!

Answer 1

Vielleicht so etwas?

.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; 
} 

nicht sicher, ob das, was Sie suchen, aber Sie können nur den Hintergrund der Steigung eingestellt, und dann ein Element über die Top-Position (hier verwende ich die ‚nach‘ Pseudo-Selektor)

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

Answer 2

Dieses ist Ihre Antwort:

#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

Ich sehe, dass diese Frage bereits alt ist, aber ich hatte gerade das gleiche Problem und ich konnte es beheben. Der Trick ist, Ihr div in ein anderes div zu wickeln.

.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>

Ergebnis:

Hope this geholfen!