CSSを使用した画像への光の追加方法

Box Shadowを使用する方法: CSSのbox-shadowプロパティを使用して、画像に光の効果を追加することができます。以下はその例です。

.image {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

この例では、.imageというクラスを持つ要素に対して、白色（rgba(255, 255, 255, 0.5)）の光の影を10ピクセルの範囲で表示します。

Pseudo要素を使用する方法: CSSの::beforeまたは::afterの疑似要素を使用して、画像の前後に光の効果を追加することもできます。以下はその例です。

.image-container {
  position: relative;
}
.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  z-index: 1;
}

この例では、.image-containerというクラスを持つ要素の前面に、白色の光の影を追加します。疑似要素のz-indexプロパティを使用して、画像よりも手前に表示されるようにしています。

Filterを使用する方法: CSSのfilterプロパティを使用して、画像に光の効果を追加することもできます。以下はその例です。

.image {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

この例では、.imageというクラスを持つ要素に対して、drop-shadowフィルタを使用して白色の光の影を追加します。

これらはいくつかの一般的な方法であり、他にもさまざまな方法があります。必要に応じて、これらのコード例を参考にして、画像に光の効果を追加する方法を選択してください。