尝试在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 */ }