4

我使用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/

4

3 回答 3

2

我的印象是，这是 Safari 中与border-radius直接在图像上使用相关的错误；它实际上是把它变成一个圆圈，它只是没有让边框绕着圆圈的边缘走，而是被它切断了。我发现了一项可能并不理想的工作，但它可能对您有用。基本上将borderandborder-radius应用于父级。这是一个例子：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;
}
于 2013-06-22T18:46:26.563 回答
0

似乎这是一个 Safari 错误，并且似乎唯一的方法是使用边框半径设置 img 本身的样式，移除外部 div 的 4px 边框并使用边距“模拟”它：

CSS：

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

.team-member img {
    display: block;
    width:94%;
    margin:3%;
    height:auto;
    -webkit-border-radius: 100%;
    -khtml-border-radius: 100%;
    -moz-border-radius: 100%;
}

HTML：

<div class="team-member">
    <img src="http://1.s3.envato.com/files/59524429/logo-s.png" alt="Johnny">
</div>

JSFiddle

在 Opera、Safari、Chrome 和 Firefox 上测试，它适用于我。

（未在 IE10 上测试，但它也应该可以工作）

于 2013-06-22T19:52:12.280 回答
-1

根据您的屏幕截图：http ://d.pr/i/Z3E3 - 尝试将图像放大，看起来它尚未达到 200 像素的完整宽度和高度。

编辑：我很抱歉没有解决边界问题。

我可能会建议以下内容：http: //jsfiddle.net/jgagne/HPjzt/7/

CSS：



    .team-member {
      display: block;
      position: relative;
      width: 50%;
      height: 0;
      padding: 0 0 50%;
      border: 4px solid #999;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      overflow: hidden;
    }

    .team-member img {
      display: block;
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      width: 100%;
      margin: auto;
    }

更新： CSS 解决了 Safari 5（在 Safari 5.1.7 及更高版本中测试）。



    .team-member {
      width: 50%;
      height: 0;
      padding: 0 0 50%;
      border: 4px solid #999;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
    }

    .team-member img {
      display: block;
      width: 100%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
    }

于 2013-06-22T19:22:58.247 回答