新登場! 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番目の値は影の広がりを定義します。
広がりは、影がどれだけ大きくなるかを定義します。影を強調します。