添加边框到圆形图像

Question

我已经在我的网站上添加了一个正常的方形图像并将其变成了一个带有border-radius的圆圈,然后尝试在它周围添加一个圆形边框,但它似乎只适用于Chrome.有关如何解决此问题的任何建议？

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

以下是该问题的屏幕截图:https: //www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png

Answer 1

看到这个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 2

这是我使用的方式:

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

Answer 3

创建一个新类：

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

这将是您的 html 代码：

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

Answer 4

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

边框半径在每个浏览器中的工作方式并不相同。你需要不同的方法。