html - 内側のストロークを作成する円形の境界線

Question

JSFiddle は次のとおりです: http://jsfiddle.net/g3QAZ/

問題は、画像の周りの白い境界線が内側の黒い境界線を作成することです。

境界線が特に白いのに、なぜ黒い内側の境界線が作成されるのですか? 助けてください。

CSS:

body {
    background: black;
}

img {
    width: 90px;
    height: 90px;
    border-radius: 500px;
    border: 5px solid #fbfbfb;
}

Answer 1

これを修正するには、画像の背景を白にします。

img {
    width: 90px;
    height: 90px;
    border-radius: 500px;
    border: 5px solid #fbfbfb;
    background-color:#fbfbfb;
}

この境界線が黒い内側の境界線を与える理由は、画像が本体の黒い背景を継承し、境界線のピクセルが丸められて、画像の背景色で塗りつぶされる画像との間にピクセルが作成されることがあるためです。