CSSを使用して画像に影を追加する方法

1. ボックスシャドウを使用する方法:

   <style>
   .image-with-shadow {
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }
   </style>
   <img src="画像のURL" class="image-with-shadow" alt="画像の説明">

   上記のコードでは、box-shadowプロパティを使用して影を作成しています。box-shadowの最初の値は水平方向のオフセット、2番目の値は垂直方向のオフセット、3番目の値はぼかしの半径、4番目の値は影の色と不透明度です。この例では、2pxの水平オフセット、2pxの垂直オフセット、4pxのぼかし半径、不透明度0.5の黒い影を作成しています。

2. text-shadowを使用する方法:

   <style>
   .image-with-shadow {
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }
   </style>
   <img src="画像のURL" class="image-with-shadow" alt="画像の説明">

   上記のコードでは、text-shadowプロパティを使用して影を作成しています。text-shadowの値の解釈はbox-shadowと同様ですが、この場合はテキストではなく画像に影が追加されます。

3. パス方式を使用する方法:

   <style>
   .image-with-shadow {
   filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
   }
   </style>
   <img src="画像のURL" class="image-with-shadow" alt="画像の説明">

   上記のコードでは、filterプロパティを使用して影を作成しています。filterの値としてdrop-shadowを指定し、その後に影のオフセット、ぼかし半径、色と不透明度を指定します。

これらの方法を使用することで、画像に影を追加することができます。影のオフセット、ぼかし半径、色、不透明度などの値を調整することで、影の外観をカスタマイズすることも可能です。ぜひ試してみてください。