Opera浏览器中的边界半径和溢出答案

【问题标题】：border-radius and overflow in opera browserOpera浏览器中的边界半径和溢出
【发布时间】：2013-01-03 14:52:45
【问题描述】：

我想在圆形 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/

我该如何解决？

【问题讨论】：

这是一个有效的 hack（通过透明的 :after 覆盖边框）：jsfiddle.net/MWu2J，但它看起来不是很漂亮，所以我不把它作为答案。无论如何，它看起来像是 Opera 中的一个错误。

标签： html css opera

【解决方案1】：

检查边界半径支持hear 也检查this

看着你的代码，我已经在 chrome、firefox 和 opera 上对其进行了测试。及其工作。

如果您使用的是旧版本，请尝试使用

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

注意但现代浏览器不需要这样做

【讨论】：

我正在使用最新版本的 Opera，但它无法正常工作。很奇怪。

【解决方案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/

【讨论】：

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