More than 3 years have passed since last update.

box-shadow を一部分だけ消す方法

Last updated at 2020-03-03Posted at 2020-03-03

要約

box-shadow を一部分だけ消すには、同じ背景色の疑似要素を使って影の上に被せます。

box-shadow を掛けた要素が別の要素と並んでいる時、上下左右の一部分だけ消したいことがあるかと思います。
プロパティ単体では上下左右の個別指定はできないのですが、box-shadow の上に疑似要素を重ねることで擬似的にbox-shadow の一部分だけを消すことは可能です。

例えば以下のようなボックスを作りたい場合、 ul に box-shadow を掛けると以下のように掛かってしまいます。

See the Pen box-shadow-1-1 by semigura (@semigura) on CodePen.

そのため li ごとに box-shadow を指定する必要がありますが、ただ個別指定しただけだと影が前の要素に被ってしまいます。

See the Pen box-shadow-1-2 by semigura (@semigura) on CodePen.

これを防ぐには、疑似要素でボックスと背景色と同じ要素を作り、影の上に被せます。

See the Pen box-shadow-1-3 by semigura (@semigura) on CodePen.

サンプルでは要素の右端と下端に被せていますがもちろん上下左右どの方向でも使用できます。

背景色が同じである必要があるので、要素の背景色が変わることが想定される場合には使用できません。