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

17コメント 2020-07-03 09:30 コリス

画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラスト

ツイッターのコメント(17)

あー、たしかに。たしかに box-shadow のほうがきれいだし、使い勝手よさそうですねこれ /
| コリス
使う事もある。デザイン次第🙄
なるほどなぁ🤔
あぁ、そっか!(めからうろこ)
この発想はなかった! すごく便利。
おおほんとだ👀
こういうのってCSS自体に疑問を持ち始めちゃう。
box-shadowの方がより美しく実装できるが、枠線ならborderを使うのが本来の役割だし、ブラウザの描画の問題なので、将来に修正されてborderでもきれいに表示される気がする。🤔
✅CSS枠線の表現の小技
ボックスシャドウはいかが?

枠線と言えばborder
やけどbox-shadowもありなんや

へー

🔽by.コリスさん
なぜ今まで気づかなかったんだ…
なるほど~。画像のサイズが変わらないのはいいかも。
今度やってみよ!

borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。
以上
 
PR
PR