尝试在Safari中添加边框时，Twitter bootstrap img-circle

Question

类img-circle创建了一个圆形图像，您可能已经猜到了。现在，当您尝试向该类添加边框时，它表现得很奇怪：它使图像成为带有截断边缘的正方形。它适用于Firefox和Chrome btw。

请参阅附件以查看差异以及代码！

div#face-wrapper .face {
 position: absolute;
 z-index: 1;
 border: 15px solid #e8e6e6;
}
.img-circle {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}

Answer 1

看起来边框总是在图像后面，所以一旦你使用css3作为border-radius，为什么不使用box-shadow作为边框？例如：

DEMO

.box-shadow{ -moz-box-shadow: 0px 0px 0px 15px #e8e6e6; /* Firefox */
-webkit-box-shadow: 0px 0px 0px 15px #e8e6e6; /* Safari, Chrome */
box-shadow: 0px 0px 0px 15px #e8e6e6; /* CSS3 */ }

Answer 2

这是一个simpler方法，使用'shrink-wrap'span。

HTML

<span id="face-wrapper">
  <img class="img-circle face" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSdlzsBNiqrnes9kVJ3zTReXHfgca2qkDD1kgvCR82OxzYsPaTz" width="200"/>
</span>

CSS

#face-wrapper {
  display: inline-block;
  background-color:#e8e6e6; 
}

.face {
  position: relative;
  border: 20px solid #e8e6e6;
}

完整jsFiddle。