ios - CSS Border Radius が iOS で機能しない

Question

iOS (safari) のボーダーに問題があります。

10px の無地で白の丸い境界線を付けたい画像 (グラバター) があります。

これを達成するために、私はHTMLを持っています

<img src="http://2.gravatar.com/avatar/b7c2d49748426791dc98b8214dfac9d1?s=500" class="img-circle" height="300" width="300">

そしてCSS

.img-circle {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
border: solid 10px white;
}

JSFiddle http://jsfiddle.net/2UT8v/2/

私は twitter のブートストラップを使用しているので、ボーダー半径はクラス .img-circle によって指定されており (そのため、半径は 500px です)、境界線の太さと色を追加しました。

これはデスクトップ ブラウザ (Chrome) では問題なく動作しますが、iOS (iPad の safari) で表示すると、10 ピクセルの白い実線の境界線がまだ元の画像の周りの正方形であり、半径が後で適用され、境界線の一部が切り取られていることが示されます。 .

iOSで境界線を半径に合わせる方法を知っている人はいますか?

Answer 1

迅速で汚い解決策：http：//jsfiddle.net/mEZEj/box-shadowの代わりに使用してくださいborder。

クリーンな解決策：http：//jsfiddle.net/TjUum/divアバターをとしてブロック要素を使用しbackground-imageます。必要に応じて調整します。