css - CSSを使用した画像の内側の境界線?

Question

CSS を使用して、コンテンツ div のすべての画像に白い境界線を追加したいと考えています。ヘッダーとフッターの div 領域の画像は影響を受けません。どうすればこれを達成できますか? 以下の例の画像を参照してください。Web ページにはさまざまなサイズの画像があります。

画像を参照してください:

Answer 1

追加の要素や疑似要素を使用せずにこれを行うことができます。

http://cssdeck.com/labs/t6nd0h9p

img {
  outline: 1px solid white;
  outline-offset: -4px;
}

IE9&10 は Outline-offset プロパティをサポートしていませんが、それ以外のサポートは良好です: http://caniuse.com/#search=outline

画像の寸法を知る必要のない代替ソリューション:

http://cssdeck.com/labs/aajakwnl

<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>

div.ie-container {
  display: inline-block;
  position: relative;
}

div.ie-container:before {
  display: block;
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: 1px solid white;
}

img {
  vertical-align: middle; /* optional */
}

Answer 2

div ID またはクラスが何であれ、単純に追加できます

#yourDivIDExample {
...
}

#yourDivIDExample img{
border:1px solid #ffffff;
}

これにより、div自体の画像の周囲に境界線が作成されます..クラスまたはグローバルルールでも同じことが機能します..

img {
border:1px solid #ffffff;
}