CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる

画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。 高コントラストの画像では目立たず、低コントラストの画像では繊細なコントラストを与えるCSSのテクニックを紹介します。 borderとbox-shadowの比較 元ネタは、下記ツイートです。意訳すると、 インセットのbox-shadowを使用すると、画像と周囲のページの間に繊細なコントラストを追加するのに最適です。borderよりもシームレスで、カラーがフレキシブルです。 👨🏾‍💻 CSS tip: inset box-shadows are great for adding subtle contrast between images and the surro

[coliss]

画像の枠線にbox-shadowを使用する方法。

[tsuki-rs]

やだよ

[rryu]

透明度の高い枠線を画像の上に重ねることで枠線が要らないくらい画像が濃ければ枠線が目立たなくなるという小技。

[sigwyg]

borderというかinsetの話だった

[kuracom]

box-shadowによる枠線は、表示倍率を小さくすると消える場合がある事に注意。