css - CSSで画像の周りに白い輪郭を描く方法

Question

次のように、画像の周囲に白い境界線を付けてスタイルを設定しようとしています。

ここに画像の説明を入力してください

私がやった場合：

 <ul class="learn">
    <li class="thumbnaile" > <img id="portrait" src="/assets/allyson.jpg" class="stretch" />
    </li>
 </ul>

...次に、.thumbnaileにパディングを追加します。

これよりも優れた/より効率的な方法はありますか？

score 13 · Accepted Answer

どちらを使用することもできますがborder（これは確かに当然の選択です）、また、：もpaddingありbox-shadowます。

img {
    background-color: #fff;
    padding: 4px;
}

この例では、img要素にが埋め込まれ4pxています。これにより、background-color画像の「後ろ」からを伸ばすことができます。

img {
    margin: 4px 0 0 4px;
    box-shadow: 0 0 0 4px #fff;
}

box-shadow要素を移動しないため、すべての側面にを表示marginできるようにする必要があります。box-shadow

score 7 · Accepted Answer

borderプロパティを使用するだけで、必要な処理を実行できます。

border: solid white 4px;

境界線を必要とする唯一の部分が（長方形の画像の）外縁である限り、それは図のようにそれを囲みます。box-sizing境界線を画像に切り込む必要がある場合は、を変更することをお勧めします。ただし、パディングの場合、デフォルトが機能します。

境界線は、画像のレイアウト方法に応じて、<li>または<img>タグで機能します（境界<li>線のない複数の画像を許可します）。

クラスに追加paddingしても同様の効果がありますが、要素のサイズ設定と配置に使用されるボックスに関しては動作が異なります。のパディングは、<li>の適切な境界線に非常に近い効果がありますが、境界線をそれ自体<img>に配置すると、CSSが単純化される可能性があります。<img>

2 に答える 2