CSS ボックスシャドウ
CSS box-shadowプロパティ
CSSbox-shadowプロパティは、要素に1つ以上の影を適用するために使用されます。
水平および垂直の影を指定する
最も単純な使用法では、水平方向と垂直方向の影のみを指定します。影のデフォルトの色は、現在のテキストの色です。
box-shadowを持つ<div>要素
影の色を指定する
colorのパラメータは影の色を定義します。
水色のボックスシャドウを持つ<div> 要素
影にぼかし効果を追加する
blurのパラメータはぼかし半径を定義します。数値が高いほど、影がぼやけます。
5pxのぼやけた水色のボックスシャドウを持つ<div>要素
影の拡散半径を設定する
のspreadパラメータは拡散半径を定義します。正の値は影のサイズを大きくし、負の値は影のサイズを小さくします。
ぼやけた水色のボックスシャドウを持つ<div>要素。
拡散半径12px
はめ込みパラメータを設定する
のinsetパラメータは、影を外側の影(アウトセット)から内側の影に変更します。
ぼやけた水色のインセットボックスシャドウを持つ<div>要素
複数の影を追加
要素は複数の影を持つこともできます:
カード
また、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シャドウプロパティ
次の表に、CSSシャドウプロパティを示します。
|
財産 |
説明 |
|---|---|
| box-shadow | 要素に 1 つ以上の影を追加します |
| text-shadow | テキストに 1 つまたは複数の影を追加します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。