画像に枠線を付けるCSS - スタイルシートTipsふぁくとりー

《2016年4月2日 11:02 公開/更新》 画像に枠線を付けるCSS [イメージ,線] ウェブ上に画像を掲載する際、画像と背景との境界をハッキリさせたい場合などで、画像の周囲に枠線を付加したいと思うことがあります。そのとき、画像にぴったり接するように枠線を付加したい場合もあれば、一定の距離を空けた位置に(画像と枠線との間に空白を挟む形で)枠線を引きたい場合もあるでしょう。そのどちらの場合も、わざわざ画像を加工する必要なく、スタイルシートだけで実現できます。 例えば、下記のような川の写真の周囲に枠線を引きたい場合を例にして説明します。 元の画像： ■画像の周囲に枠線を引く3パターンの方法《目次》 画像の周囲ぴったりに枠線を引く方法 画像の周囲に一定の余白を設けて枠線を引く方法 画像の周囲に、異なる色で二重の枠線を引く方法 画像の周囲ぴったりに枠線を引く方法 画像の周囲ぴったりの位置に枠線