css - 尝试在 Safari 中添加边框时，Twitter 引导 img-circle

Question

正如您可能猜到的那样，img-circle 类创建了一个圆形图像。现在，当您尝试为该类添加边框时，它的行为很奇怪：它使图像变成正方形，并带有截止边缘。顺便说一句，它在 Firefox 和 Chrome 上运行良好。

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

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作为边框呢？前任。：

演示

.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

这是一个更简单的方法，使用 '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。