twitter-bootstrap 尝试在 Safari 中添加边框时 Twitter 引导 img-circle
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15372790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap img-circle when try to add border in Safari
提问by PericlesTheo
The class img-circle creates a rounded image as you probably guessed. Now, when you try to add border to that class it behaves weird: it makes the image square with cut-off edges. It works fine on Firefox and Chrome btw.
正如您可能猜到的那样，类 img-circle 创建一个圆形图像。现在，当您尝试向该类添加边框时，它的行为很奇怪：它使图像变成方形并带有截止边缘。顺便说一句，它在 Firefox 和 Chrome 上运行良好。
Please see the attached files to see the difference and also the code!
请参阅附件以查看差异和代码！
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;
}
回答by Jo?o Rafael
It seems that the border is always behind the image, so once you are using css3 for border-radius, why don't you use box-shadow for borders? ex.:
似乎边框总是在图像的后面，所以一旦你使用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 */
}
.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 */
}
回答by Brett DeWoody
Here's a bit simplermethod, using a 'shrink-wrap' span.
这是一个更简单的方法，使用 'shrink-wrap' span。
HTML
HTML
<span id="face-wrapper">
<img class="img-circle face" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSdlzsBNiqrnes9kVJ3zTReXHfgca2qkDD1kgvCR82OxzYsPaTz" width="200"/>
</span>
CSS
CSS
#face-wrapper {
display: inline-block;
background-color:#e8e6e6;
}
.face {
position: relative;
border: 20px solid #e8e6e6;
}
And the full jsFiddle.
和完整的jsFiddle。
