58 
.activity_rounded  {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    border: 3px solid #fff;
    behavior: url(css/PIE.htc);
}
<img src="img/demo/avatar_3.jpg" class="activity_rounded" alt="" />

これは私のCSSとHTMLです。画像を円のように見せたい。IE8+、Google Chrome、Mozilla Firefox ではすべて正常に動作します。しかし、Safari の動作がちょっとおかしいです。ここにデモ画像があります： ここに画像の説明を入力

4

11 に答える 11

121

Safari での問題を説明するために、単純な画像から始めましょう。

ここに 100px x 100px の画像があります。3px の境界線を追加すると、要素のサイズが 106px x 106px に増加します。

次に、境界半径を 20% にします。

画像自体からではなく、要素の外側の境界からトリミングを開始することがわかります。

さらにマグニチュードを 50% に増やします。

境界線の色を白に変更します。

これで、問題がどのように発生するかがわかります。

ブラウザのこのような動作のため、境界線のある円で画像を作成する場合、画像と境界線の両方に境界半径が指定されていることを確認する必要があります。これを確実にする 1 つの方法は、画像をコンテナー内に配置して境界線を画像から分離し、両方に境界線の半径を適用することです。

<div class="activity_rounded"><img src="http://placehold.it/100" /></div>

.activity_rounded {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    border: 3px solid #fff;
}

.activity_rounded img  {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    vertical-align: middle;
}

これで、Safari の画像の周りに素敵な円の境界線ができました。

デモを参照してください。

于 2013-06-20T10:05:34.520 に答える
37

これはうまくいくようです：

.wrap{
   -webkit-transform: translateZ(0);
   -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

于 2014-05-19T10:45:59.070 に答える
3

box-shadow古いブラウザを気にしない場合は、単に使用してください。

.rounded {
  box-shadow: 0 0 0 10px pink;
}
于 2014-08-25T05:29:37.427 に答える
2

手書きのマークアップを試しましたか?

-webkit-border-top-left-radius 
-webkit-border-top-right-radius 
-webkit-border-bottom-left-radius 
-webkit-border-bottom-right-radius

一部のバージョンの Safari で短縮表記を使用すると、バグが発生するようです。

于 2013-06-20T08:58:02.227 に答える
2

私が行った簡単な方法は、丸みを帯びたPNG画像を使用し、境界線と半径50％を適用することでした

例 ：

http://www.laugfs.lk/#ourbusiness

于 2014-05-08T04:07:08.300 に答える