CSSシークレット ―47のテクニックでCSSを自在に操る

知っておくべきポイント

box‑shadow

課題

長方形や border‐radiusを使って作成された形状については、 box‐

shadowを指定すると正しくドロップシャドウが表示されます（ P.114の

「さまざまな楕円形」でいくつか例を紹介しています）。一方、擬似要素

などを使った半透明の装飾が加えられているとbox‐shadowは期待どおり

には機能しません。透明度が考慮されないためです。例えば次のような

ケースが該当します。

不規則な形状のドロップ

シャドウ

16

半透明の画像や背景画像あるいはborder‐image（写真を飾る額のような

画像など）

背景がない（または background‐clipが border‐boxではない）場合

の、点線や破線または半透明のボーダー

吹き出し状の表示で、突き出た部分に擬似要素が使われているもの

切り落とされた角「 P.130の「角の切り落とし」参照）

折り返された角「 P.124の「ひし形の画像」参照）の大部分

clip‐pathを使って定義された形状「 P.124の「ひし形の画像」など）

168

4章：視覚効果

■

■

■

■

■

■

これらに対して box‐shadowを適用すると、図 4.6 のように失敗しま

す。解決策はあるのでしょうか、それともあきらめるべきでしょうか。 ...