css ボックスに影をつけるには? 〜box-shadowを考える〜


box-shadowを使う (テキストにつけるにはtext-shadow)

5つの値を指定できる。
さらに、optionとしてつけれ値あり
使用例)
 box-shadow: 0px 0px 8px 3px #fff inset(つけたいオプションがあれば);
  ※各値の間は半角スペースで区切ります。

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

box-shadow:

①水平(X軸)方向にどのくらい伸ばすか? 
   ※ボックスの内側4辺全てに影をつけたい時は0pxにする
②垂直(Y軸)方向にどのくらい伸ばすか 
   ※ボックスの内側4辺全てに影をつけたい時は0pxにする

③ぼかし度合いpx pxが大きいほどぼかしが効く

④影の広さどのくらい広げるか pxが大きいほど影が大きくなる

⑤色 

⑥オプション insetつけると 影が内側に表示される


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です