Blog

HOME > Web > css > 【CSS】要素の下だけにboxshadowを付ける

【CSS】要素の下だけにboxshadowを付ける

2015/07/15

css

備忘録です。

参考サイト
box-shadow 使う時、影を出す方向を一方向に抑える

box-shadow を使って下方向だけ影を出す指定をしても、左右にもちょっと出てしまいます。

.box-shadow {
  box-shadow: 0px 6px 3px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0px 6px 3px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 6px 3px rgba(0,0,0,0.6);
}

左右の影を消すために、4番目の指定（広がり値）をぼかしの値と同じだけ負の値で指定（縮小）してあげると消えます。
この時、下方向の影の長さを負の値で指定した分だけ足さないと上と同じ影の長さにはなりません。 

.box-under-shadow {
  box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6);
}

下の内側に付ける場合
hoverで下線を表示したい場合に使っています。

.box-under-shadow {
  box-shadow: 0px 9px rgba(0,0,0,0.6) inset;
  -webkit-box-shadow: 0px 9px rgba(0,0,0,0.6) inset;
  -moz-box-shadow: 0px 9px rgba(0,0,0,0.6) inset;
}

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

神社仏閣ホームーページ制作

ホームページ制作問合せ

口コミロボ