CSS

box-shadow is a CSS property that adds a shadow to an element, allowing you to specify its position, size, color, etc. It can be used to create multiple shadows, act as a border, or customize the shape using the border-radius property.

box-shadow

　box-shadowは、要素に影を付けることができるプロパティの 1つです。このプロパティは、要素の周りに影を追加することができ、要素の浮き出し感や奥行き感を強調することができます。

　基本構文は以下の通りです。

CSS

box-shadow: h-shadow v-shadow blur spread color inset;

　それぞれの値について解説していきます。

h-shadow: 水平方向の影の位置を指定します。正の値は右方向、負の値は左方向に影がつきます。
v-shadow: 垂直方向の影の位置を指定します。正の値は下方向、負の値は上方向に影がつきます。
blur: 影のぼかしの程度を指定します。値が大きいほど影がぼやけます。
spread: 影の拡散の程度を指定します。値が正の場合は影が広がり、負の場合は縮まります。
color: 影の色を指定します。色名やRGB値、16進数値などで指定できます。
inset: オプションで、影を要素の内側に表示するか外側に表示するかを指定できます。この値を指定しない場合は、影は要素の外側に表示されます。

HTML

<div class="smp1"></div>
<div class="smp2"></div>
<div class="smp3"></div>
<div class="smp4"></div>

CSS

div {
	margin: 1em;
	width: 50px;
	height: 50px;
	background-color: azure;
}

.smp1 {
	/* 4つの値を指定した場合 */
	box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
}

.smp2 {
	/* 3つの値を指定した場合 */
	box-shadow: 5px 5px 5px;
}

.smp3 {
	/* 2つの値を指定した場合 */
	box-shadow: 5px 5px;
}

.smp4 {
	/* insetを指定した場合 */
	box-shadow: inset 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
}

　長さの指定を省略すると0となり、色の指定を省略するとユーザーエージェントが選んだ色になります。

　さらに、box-shadowプロパティは、次のような応用的な使い方もあります。

複数の影を指定する

　box-shadowプロパティは、カンマで区切って複数の影を指定することができます。この場合、先に指定された影が要素の下に表示され、後に指定された影がさらにその下に表示されます。複数の影を使うことで、要素により多くの奥行き感を与えることができます。

HTML

<div class="smp5"></div>

CSS

.smp5 {
	box-shadow: 5px 5px 5px rgba(255, 20, 20, 0.5), 
				10px 10px 10px rgba(20, 20, 255, 0.5);
}

ボーダーとしての利用

　box-shadowプロパティを使うことで、ボーダーとしての役割も果たすことができます。この場合、insetキーワードを指定し、要素の内側に影を表示します。

HTML

<div class="smp6"></div>

CSS

.smp6 {
	box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.5);
}

影の形状をカスタマイズする

　box-shadowプロパティを使うことで、影の形状をカスタマイズすることができます。これには、border-radiusプロパティを使います。

HTML

<div class="smp7"></div>

CSS

.smp7 {
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	border-radius: 50%;
}

　このように、border-radiusプロパティを使うことで、影の形状を丸くすることができます。この技術を使って、ボタンやアイコンなどの要素に立体感を与えることができます。

　box-shadowは、要素に影をつけるための強力なプロパティです。影の位置、大きさ、色を指定することで、要素の見た目をより美しく、洗練されたものにすることができます。また、box-shadowを使うことで、要素に立体感を与えることもできます。

　尚、box-shadowプロパティは、::first-letter擬似要素に適用されますが、::first-line擬似要素には適用されません。また、border-collapse:collapse;が指定された table内要素には、外側の影はつきません。

　テキストに影をつける場合には、text-shadowプロパティを使用します。