Opera浏览器中的border-radius和overflow

Question

我希望在圆形div中显示图片的部分。我有一段代码，但在Opera浏览器中无法正常工作。

CSS:

body {
    background-color: silver;
}
div {
      width: 90px;
      height: 90px;
      border: 1px solid;
      overflow: hidden;
      border-radius: 45px;
}
img {
      margin-left: -75px;
      width: 350px;
      height: 90px;
}​

HTML：

<div>
      <img src="http://diskuse.jakpsatweb.cz/img/logo.png">
</div>​

http://jsfiddle.net/vpfEY/6/

我该如何修复它？

- user1921267

---

这里有一个可行的 hack（通过透明的 :after 与覆盖边框）：http://jsfiddle.net/MWu2J/，但它看起来不太美观，所以我不会将其作为答案。无论如何，这似乎是 Opera 中的一个 bug。 - c69

Answer 1

检查边框半径支持这里，同时也要检查这里

看起来你的代码是有效的，我已经在Chrome、Firefox和Opera上测试过了，它可以正常工作。

如果你正在使用旧版本，请尝试使用新版本。

-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;

注意 但现代浏览器不需要此步骤

- GajendraSinghParihar

---

我正在使用最新版本的Opera但它不能正常工作。这很奇怪。 - user1921267

Answer 2

我不确定为什么图像不遵循border-radius属性。但是，我可以使用背景图像使其正常工作。

HTML

<div></div>

CSS：

body {
    background-color: silver;
}
div {
      width: 90px;
      height: 90px;
      border: 1px solid;
      overflow: hidden;
      border-radius: 45px;
      background:url(http://diskuse.jakpsatweb.cz/img/logo.png) -115px 0 no-repeat;
}

http://jsfiddle.net/vpfEY/18/

- corymathews

---

谢谢，但我不想使用背景图片。 - user1921267