web-dev-qa-db-fra.com

Ajouter une bordure à l'image du cercle

J'ai ajouté une image carrée normale à mon site Web et l'ai transformé en cercle avec un rayon de rayon, puis j'ai essayé d'ajouter une bordure de cercle tout autour, mais cela ne semble fonctionner que sous Chrome. Des suggestions sur la façon dont je peux résoudre ce problème?

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

Voici une capture d'écran du problème: https://www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png

cssbordercss3
14
SlightlyClever

Voir ce 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;
}
18
Akusete

C'est comme ça que j'utilise:

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="..">
6
ufukomer

créer une nouvelle classe:

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

et ce serait votre code html:

<div class="circleborder"><img src="URL"/></div>
4
Manh Khôi Duong

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

Merci pour votre aide les gars! Je teste ma solution au moment où nous parlons, mais cela a fonctionné sous Chrome & Safari sur mon Mac et mon iPhone! :RÉ

1
SlightlyClever

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

Le rayon de bordure ne fonctionne pas de la même manière dans tous les navigateurs. Vous avez besoin d'approches différentes.

1
Francisco Afonso

Essayez celui-ci ce sera une aide pour vous.

.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 */
    }
0
Muhammad Hamza Nisar