css - 为什么边界半径 :200px is not a circle shape in Safari 5/6?

Question

我使用 border-radius:200px 使图像成为圆形，它在 IE10、chrome、Firefox 上工作正常，但它不是 safari 5 和 safari 6 上的竞争圆圈。

我的 CSS 代码是:

.team-member img {
  display: block;
  width:50%;
  height:auto;
  margin: 0 auto 20px;
  border: 4px solid #ccc;
  -webkit-border-radius: 200px;
  -khtml-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

当我移除边框:3px solid #ccc 时，它在 safari 上工作正常，但我需要保留图像周围的边框，如何解决这个问题？谢谢!!!

演示在这里: http://jsfiddle.net/badjohnny/kyfha/

Answer 1

我的印象是这是 Safari 中与使用 border-radius 相关的错误。直接在图像上；它实际上是使它成为一个圆，它只是没有使边界围绕圆的边缘，而是被它切断了。我找到了一项可能不理想的工作，但它可能对您有用。基本适用border和 border-radius改为给 parent 。这是一个例子:http://jsfiddle.net/kyfha/4/

和 CSS:

.team-member {
    width: 200px;
    height: 200px;
    border: 4px solid #ccc;
    -webkit-border-radius: 200px;
    -khtml-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
    overflow: hidden;
    margin: 20px auto;
}

.team-member img {
  display: block;
  width:100%;
  height:auto;
}