新登場! 44ページの電子書籍「CSSを44分で学ぶ」がリリースされました! 😃

今すぐ入手 →

#box-shadow

要素の影を定義します。

デフォルト box-shadow: none;

要素に適用されていたbox-shadowを削除します。

box-shadow: 2px 6px;

少なくとも2つの値が必要です

  • 1つ目は水平方向のオフセットです
  • 2つ目は垂直方向のオフセットです

影の色はテキストの色から継承されます。

box-shadow: 2px 6px red;

最後の値としてを定義できます。

colorと同様に、色の名前、16進数、rgb、hslなどを使用できます。

box-shadow: 2px 4px 10px red;

オプションの3番目の値は影のぼかしを定義します。

この例では、色は10pxにわたって不透明から透明に拡散されます。

box-shadow: 2px 4px 10px 4px red;

オプションの4番目の値は影の広がりを定義します。

広がりは、影がどれだけ大きくなるかを定義します。影を強調します。