白背景の商品画像に outline-offset: -1px で内側の縁取りを付ける
outline を outline-offset: -1px で画像の内側に引き込み、白いカードの上でも白背景の商品写真の輪郭が消えないようにする。
どんな時に使う？
EC の商品一覧やカード UI で、白背景の切り抜き写真を白いカードに載せると、画像の端がどこなのか分からなくなる。border を足すとサイズが 2px 増えてレイアウトがずれるうえ、写真の色によっては線が目立ちすぎる。薄い半透明の線を「画像の内側」に描けば、サイズを変えずに輪郭だけを取り戻せる。
コード／手順
css
.product-image {
border-radius: 12px;
outline: 1px solid rgb(0 0 0 / 0.1); /* ごく薄い黒 */
outline-offset: -1px; /* 線を画像の内側へ */
}outlineはボックスサイズに含まれないので、幅・高さ・周囲の要素の位置は一切変わらない。outline-offsetに負の値を入れると線が内側に食い込み、画像の端に重なって描かれる。- 色は不透明の灰色ではなく
rgb(0 0 0 / 0.1)のような半透明にすると、白背景では淡い縁取りに、色の濃い写真ではほぼ見えなくなり、どの写真にも馴染む。 - ダークモードでは
rgb(255 255 255 / 0.1)に切り替えると同じ効果になる。
注意点・対応状況
- 現行の主要ブラウザでは
outlineがborder-radiusに沿って角丸で描かれる（古い Safari では角丸に沿わず四角く出ることがあった）。 :focus-visibleのフォーカスリングにもoutlineを使っている場合、画像をリンク内に置くと上書きし合う。フォーカス表示はリンク側（親要素）に付けるなど役割を分けておく。box-shadow: insetは<img>の上には描かれない（置換要素の中身に隠れる）ため、画像そのものに内側の線を引くならこのoutline方式が手軽。