CSSボックスシャドウ
CSSボックスシャドウプロパティ
CSSbox-shadowプロパティは、要素に1つ以上の影を適用するために使用されます。
水平および垂直の影を指定する
最も単純な使用法では、水平シャドウと垂直シャドウのみを指定します。影のデフォルトの色は、現在のテキストの色です。
ボックスシャドウ付きの<div>要素
例
水平および垂直の影を指定します。
div
{
box-shadow: 10px 10px;
}
影の色を指定する
colorパラメータは、影の色を定義します。
灰色のボックスシャドウを持つ<div>要素
例
影の色を指定します。
div
{
box-shadow: 10px 10px grey;
}
影にぼかし効果を追加する
このblurパラメータは、ぼかし半径を定義します。数値が大きいほど、影がぼやけます。
5pxのぼやけた灰色のボックスシャドウを持つ<div>要素
例
影にぼかし効果を追加します。
div
{
box-shadow: 10px 10px 5px grey;
}
影の広がり半径を設定する
spreadパラメータは、広がり半径を定義します。正の値は影のサイズを大きくし、負の値は影のサイズを小さくします。
広がり半径が12pxの、ぼやけた灰色のボックスシャドウを持つ<div>要素
例
影の広がり半径を設定します。
div
{
box-shadow: 10px 10px 5px 12px grey;
}
はめ込みパラメータを設定します
このinsetパラメータは、シャドウを外側のシャドウ（最初）から内側のシャドウに変更します。
ぼやけた灰色のはめ込みボックスシャドウを持つ<div>要素
例
はめ込みパラメータを追加します。
div
{
box-shadow: 10px 10px 5px grey inset;
}
複数の影を追加する
要素は複数の影を持つこともできます：
例
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
カード
box-shadowこのプロパティを使用して、紙のようなカードを作成することもできます。
1
2021年1月1日
ノルウェー、ハルダンゲル
例
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
CSS Shadow Properties
The following table lists the CSS shadow properties:
| Property | Description |
|---|---|
| box-shadow | Adds one or more shadows to an element |
| text-shadow | Adds one or more shadows to a text |