box

英[bɒks] 美[bɑ:ks]

n.ボックス; 箱のような物体; ボックス; 哨兵室

vt. Put... into a box [box, box]

vt.& vi.Boxing

三人称単数: ボックス 複数形: ボックス 現在分詞: ボクシング 過去形: ボックス過去分詞: boxed

shadow

英[ˈʃædəʊ] 美[ˈʃædoʊ]

n.影; 影; 幽霊; 幽霊; 隠れ場所

vt.影を落とす;霞ませる;追跡、痕跡;前兆

##vi.グラデーション;陰鬱な

adj.影;影のキャビネット;非公式

#三人称単数:shadows 複数形:shadows 現在分詞:shadowing 過去形:shadowed 過去分詞:shadowed

css box-shadow プロパティ 構文

機能:ボックスに 1 つ以上の影を追加します。

構文: box-shadow: h-shadow v-shadow ブラー スプレッド カラー インセット;

手順: h-shadow が必要です。水平方向の影の位置。負の値も許可されます。 v-shadow は必須です。垂直影の位置。負の値も許可されます。ぼかしはオプションです。曖昧な距離。スプレッドはオプションです。影のサイズ。色はオプションです。影の色。 CSS カラー値を参照してください。インセットはオプションです。外側のシャドウ(アウトセット)を内側のシャドウに変更します。

コメント: box-shadow ボックスに 1 つ以上の影を追加します。このプロパティは、シャドウのコンマ区切りのリストで、それぞれ 2 ~ 4 個の長さの値、オプションのカラー値、およびオプションの inset キーワードで指定されます。省略された長さの値は 0 です。

css box-shadow プロパティ 例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

インスタンスの実行 »

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します