【CSS】box-shadowが効かない時の対処法

  • 2019年5月14日
  • CSS

久しぶりな気がする CSS ネタ!
今回は、div要素 に追加していた box-shadow プロパティが効いたり効かなかったりしたので、その対処法についてです。

 

参考にさせていただいた記事はこちらから。

box-shadowがうまく適用されない|memopad
http://memopad.noor.jp/html-css/post-452/

記事によると、コンテンツに指定していた overflow: hidden; が原因とのことで、私の場合も、box-shadow プロパティを指定していた要素の親要素に overflow: hidden; を指定していました。
なお上記の記事では、コンテンツの中にあるサムネイル画像に float を適用していて、それを overflow と position で解除していたのが原因だったとのことです。

なので、overflow: hidden; を親要素から削除したところ、解決しました!

他の記事では、filter: drop-shadow(); を代わりに使うとか、box-shadow の第4引数?の広がり距離を指定するとか、z-index を定義するとか、position:relative; を定義する…などがありましたが、私の環境ではこれでは解決できませんでした。

 

以上、CSS の box-shadow が効かない時の対処法でした。
これが当てはまらない場合もあるとは思いますが、同じように box-shadow で要素に影がつけられない場合は、とりあえず overflow: hidden; を指定しているかどうかを確認してみることをおすすめします。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG