TECH I.S.

CSS ボックスシャドウ


CSS box-shadowプロパティ

CSSbox-shadowプロパティは、要素に1つ以上の影を適用するために使用されます。


水平および垂直の影を指定する

最も単純な使用法では、水平方向と垂直方向の影のみを指定します。影のデフォルトの色は、現在のテキストの色です。

box-shadowを持つ<div>要素

水平および垂直の影を指定する:

div{   box-shadow: 10px 10px; }

自分で試してみる»


影の色を指定する

colorのパラメータは影の色を定義します。
水色のボックスシャドウを持つ<div> 要素

影の色を指定する:

div{   box-shadow: 10px 10px lightblue; }

自分で試してみる»


影にぼかし効果を追加する

blurのパラメータはぼかし半径を定義します。数値が高いほど、影がぼやけます。
5pxのぼやけた水色のボックスシャドウを持つ<div>要素

影にぼかし効果を追加する:

div{   box-shadow: 10px 10px 5px lightblue; }

自分で試してみる»


影の拡散半径を設定する

spreadパラメータは拡散半径を定義します。正の値は影のサイズを大きくし、負の値は影のサイズを小さくします。

ぼやけた水色のボックスシャドウを持つ<div>要素。 拡散半径12px

影の拡散半径を設定します。

div{   box-shadow: 10px 10px 5px 12px lightblue; }

自分で試してみる»


はめ込みパラメータを設定する

insetパラメータは、影を外側の影(アウトセット)から内側の影に変更します。

ぼやけた水色のインセットボックスシャドウを持つ<div>要素

挿入パラメーターを追加します。

div{   box-shadow: 10px 10px 5px lightblue inset; }

自分で試してみる»


複数の影を追加

要素は複数の影を持つこともできます:

div{   box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green; }

自分で試してみる»


カード

また、box-shadow紙のようなカードを作成するプロパティ:

1

2021年1月1日

Norway

ハルダンゲル、ノルウェー

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シャドウプロパティ

次の表に、CSSシャドウプロパティを示します。


財産

説明

box-shadow 要素に 1 つ以上の影を追加します
text-shadow テキストに 1 つまたは複数の影を追加します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細