css - Safari で境界線を追加しようとすると、Twitter が img-circle をブートストラップする

Question

ご想像のとおり、クラス img-circle は丸みを帯びた画像を作成します。ここで、そのクラスに境界線を追加しようとすると、奇妙な動作になります。画像が正方形になり、エッジが切り取られます。ところで、FirefoxとChromeで問題なく動作します。

添付ファイルを参照して、違いとコードを確認してください。

div#face-wrapper .face {
 position: absolute;
 z-index: 1;
 border: 15px solid #e8e6e6;
}
.img-circle {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}

Answer 1

境界線は常に画像の後ろにあるように見えるので、境界線に css3 を使用している場合は、境界線に box-shadow を使用してみませんか? 元。：

デモ

.box-shadow{ -moz-box-shadow: 0px 0px 0px 15px #e8e6e6; /* Firefox */
-webkit-box-shadow: 0px 0px 0px 15px #e8e6e6; /* Safari, Chrome */
box-shadow: 0px 0px 0px 15px #e8e6e6; /* CSS3 */ }

Answer 2

'shrink-wrap' を使用したもう少し簡単なspan方法を次に示します。

HTML

<span id="face-wrapper">
  <img class="img-circle face" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSdlzsBNiqrnes9kVJ3zTReXHfgca2qkDD1kgvCR82OxzYsPaTz" width="200"/>
</span>

CSS

#face-wrapper {
  display: inline-block;
  background-color:#e8e6e6; 
}

.face {
  position: relative;
  border: 20px solid #e8e6e6;
}

そして完全なjsFiddle。