Rahmen zum Kreisbild hinzufügen

Question

Ich habe ein normales quadratisches Bild zu meiner Website hinzugefügt und es zu einem Kreis mit Rahmenradius gemacht. Dann habe ich versucht, einen Kreisrahmen hinzuzufügen, aber es scheint nur in Chrome zu funktionieren. Irgendwelche Vorschläge, wie ich das beheben kann?

.face { 
display: block; 
margin: auto; 
border-radius: 100%; 
border: 5px solid #ff675b;} 

Hier ist ein Screenshot der Ausgabe: https://www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png

Answer 1

http://www.css3.info/preview/rounded-border/

Grenzradius nicht in jedem Browser auf die gleiche Weise funktioniert. Sie brauchen unterschiedliche Ansätze.

Answer 2

eine neue Klasse erstellen:

.circleborder { 
width: 300px; 
height: 300px; 
border-radius: 150px; 
-webkit-border-radius: 150px; 
-moz-border-radius: 150px; 
background: url(URL) no-repeat; 
box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
} 

und dies Ihr HTML-Code wäre:

<div class="circleborder"><img src="URL"/></div> 

Answer 3

Sehen Sie diese JsFiddle

http://jsfiddle.net/z3rLa/1/

.avatar { 
    width:128px; 
    margin: 10px; 
    border:10px solid red; 
    border-radius: 500px; 
    -webkit-border-radius: 500px; 
    -moz-border-radius: 500px; 
} 

Answer 4

Die HTML:

<div class="circleborder"><img class="face" src="img/face.jpeg" alt="face" width="130" height="130"></div> 

CSS:

.face { 
border-radius: 100%;} 

.circleborder { 
border: 5px solid #ff675b; 
border-radius: 100%; 
display: inline-block;} 

Vielen Dank für Ihre Hilfe Jungs! Ich teste meine Lösung, während wir sprechen, und so funktioniert es an Chrome & Safari auf meinem Mac und iPhone! : D

Answer 5

Versuchen Sie dieses, es wird Ihnen helfen.

.clip-circle { 
     clip-path: circle(60px at center); 
     /* OLD VALUE example: circle(245px, 140px, 50px); */ 
     /* Yep, even the new clip-path has deprecated stuff. */ 
    } 
    .clip-ellipse { 
     clip-path: ellipse(60px 40px at 75px 30px); 
     /* OLD VALUE example: ellipse(245px, 80px, 75px, 30px); */ 
    } 
    .clip-polygon { 
     clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); 
     /* Note that percentages work as well as px */ 
    } 

Answer 6

Das ist die Art, wie ich verwenden:

CSS:

.avatar { 
    display: block; 
    border-radius: 200px; 
    box-sizing: border-box; 
    background-color: #DDD; 
    border: 5px solid #cfd8dc; 
} 

img { 
    height: 200px; 
    width: 200px 
} 

HTML:

<img class="avatar" src="..">