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

村上 著者:村上

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

久しぶりな気がする 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; を指定しているかどうかを確認してみることをおすすめします。

  • この記事いいね! (0)

著者について

村上

村上 administrator