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