html - ボーダー半径とOperaブラウザのオーバーフロー

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/

どうすれば修正できますか？

Answer 1

画像が 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/

Answer 2

境界半径のサポートを確認してくださいこれも確認してください

コードを見ると、動作しているように見えますが、chrome、firefox、opera でテストしました。そしてその働き。

古いバージョンを使用している場合は、使用してみてください

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

注ただし、これはモーデン ブラウザには必要ありません。