Webサイトに画像を載せるだけでは、少し物足りなく感じることもありますよね。
CSSを使えば、画像にちょっとした装飾を加えて、ぐっと見栄えを良くすることができます。

画像を丸く切り抜く

プロフィール画像やアイコンなどに使えます。

.circle-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

画像に影をつける

浮き上がったような立体感が出せます。

.shadow-img {
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

画像に枠線をつける

全体のデザインにメリハリが出ます。

.border-img {
  border: 3px solid #3498db;
  padding: 4px;
  background-color: #fff;
}

応用：丸くて影付きの画像

複数の装飾を組み合わせることもできます。

.circle-shadow-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

まとめ

CSSの装飾は、画像の印象をぐっと引き立ててくれます。
ユーザーの目を引きたいときや、写真をきれいに見せたいときに、ぜひ試してみてください！