rounded-corners - border-radiusはimg要素に適用されません

Question

IE 10で境界半径を設定しようとしていますが、IE 9では機能しません。問題は、画像の左上隅のみに半径を定義すると、画像がクリップされないことです。ボーダー半径。

悪い：

<img style="border-radius: 14px 0px 0px 0px" alt="" src="">

ここで、右上または左下のいずれかに2番目の境界半径を追加すると、左上の半径が適用されます。

良い：

<img style="border-radius: 14px 1px 0px 0px" alt="" src="">

このURLは問題を示し、IE10を使用していない人のための参照画像を追加します。

更新9/30：ConnectサイトでMicrosoftから返信があり、問題を再現できることを確認し、さらに調査しています。

score 5 · Accepted Answer

画像のIE 10で丸みを帯びた角が適用されないという同じ問題がありました。もともと私はこれを持っていました：

border-radius: 45px 0 45px 0;

結果として境界線がまったくないため、0 境界半径のいずれかを変更すると、境界半径が再び表示されました。

最後に、このスタイルを適用しました：

border-radius: 45px 0.1px 45px 0.1px;

他のブラウザでは副作用はありませんが、IE 10 では角が丸くなっています。

score 0 · Accepted Answer

0

試してみてくださいborder-top-left-radius: 14px。

于 2012-09-28T13:24:59.097 に答える

score -1 · Accepted Answer

私の知る限り、ほとんどのブラウザーでは、丸い境界線で画像をクリップすることはできません。(そして、IE10 で実行されたとしても、他のブラウザーでは奇妙に見えるかもしれません)。最も簡単な解決策は、ネストされた div を使用し、画像を背景として設定することです。

HTML

<div class="imageborder">
  <div id="image1"> </div>
</div>

CSS

.imageborder {
  border-radius: 5px;
}
#image1 {
  background-image: (yourimage);
}

表示するには、div の高さを手動で設定する必要がある場合があります。

3 に答える 3