記事のタイトルと説明も注意深く翻訳してください: 完全なCSSリファレンス

以下は、画像に適用できるCSSエフェクトとボーダーの包括的なリファレンスです。それぞれの例も紹介しています:

  1. ボーダー: 画像の周りにボーダーを追加します。
img {
  border: 2px solid black;
}
  1. ボックスシャドウ: 画像の周りに影を追加します。
img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
  1. 不透明度: 画像の透明度を調整します。
img {
  opacity: 0.5;
}
  1. グレースケール: 画像をグレースケールに変換します。
img {
  filter: grayscale(100%);
}
  1. セピア: 画像にセピア効果を適用します。
img {
  filter: sepia(100%);
}
  1. ぼかし: 画像をぼかします。
img {
  filter: blur(5px);
}
  1. 明るさ: 画像の明るさを調整します。
img {
  filter: brightness(50%);
}
  1. コントラスト: 画像のコントラストを調整します。
img {
  filter: contrast(200%);
}
  1. 色相回転: 画像の色相を回転します。
img {
  filter: hue-rotate(90deg);
}
  1. 反転: 画像の色を反転させます。
img {
  filter: invert(100%);
}
  1. 彩度: 画像の彩度を調整します。
img {
  filter: saturate(200%);
}
  1. セピア: 画像にセピア効果を適用します。
img {
  filter: sepia(100%);
}
  1. ドロップシャドウ: 画像にドロップシャドウ効果を追加します。
img {
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}
  1. トランジション: 画像にトランジション効果を追加します。
img {
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.1);
}
  1. アニメーション: 画像にアニメーション効果を追加します。
@keyframes slidein {
  from {
    transform: translateX(100%); // 右からスライドイン
  }
  to {
    transform: translateX(0); // 元の位置
  }
}
img {
  animation: slidein 1s ease;
}

これらは、画像に適用できる多くのCSSエフェクトとボーダーのほんの一部です。さまざまなスタイルを試して、ユニークで目を引くデザインを作成してみてください!