【CSS Modules】box-shadowプロパティの使い方

box-shadowプロパティは、要素のフレームの周りに影を付けるための視覚効果に関する情報を保持するプロパティです。このプロパティを使用することで、ウェブページ上の要素に立体感や奥行きを持たせ、視覚的な魅力を高めることができます。

影の表現は複数の値を組み合わせて指定します。まず、影の水平方向のオフセットと垂直方向のオフセットで、影が要素からどの位置にずれるかを定義します。正の値は右下方向へ、負の値は左上方向へ影を移動させます。次に、ぼかし半径を設定することで影のエッジの柔らかさを調整し、値が大きいほど影が広がり柔らかくなります。さらに、広がり半径を指定することで影のサイズを内外に拡大または縮小させることが可能です。最後に、影の色を指定することで、視覚的な印象を決定します。

オプションとして、insetキーワードを値の先頭に加えることで、要素の内側に影を作成し、凹んだような視覚効果を与えることもできます。また、カンマで区切ることで複数の影を同じ要素に適用でき、それぞれ異なるオフセットやぼかし、色を持つ影を組み合わせることで、より複雑で豊かなデザインを実現できます。

このプロパティは、ボタンやパネルなどのUI要素にリアルな質感を加えたり、重要なコンテンツを目立たせたりする際に非常に有効です。ウェブデザインにおいて要素の見た目を豊かにし、ユーザーエクスペリエンスを向上させるための基本的ながら強力なツールとして広く利用されています。

Copy
1box-shadow: 2px 2px 5px #888888;

引数なし

引数はありません

戻り値なし

戻り値はありません