これまでウェブページでボックスの立体感を出すために、画像ソフトウェアでドロップシャドウを作成したり、Javascritptのプラグインを使用して表現していました。
近年ではCSS3でbox-shadowを記述するだけで、実現することができるようになっており大変重宝しています。
先日、とあるサイトの制作でこのbox-shadowを使った折に、特定のpタグを強調するためにtext-shadowを使うと、スマートフォン等で閲覧した場合、pタグ内の文字列と、pタグの周囲にもシャドウが表示されてしまいました。
色々調べたところ、このpタグの親要素のdivタグにbox-shadowを定義していたためと判明しました。
そこでこの特定のpタグに対して、cssでbox-shadowをnoneとして親要素からの継承を打ち消すと、めでたく文字列部分のtext-shadowだけが表示されるようになりました。