html - ボックスの影が含まれている要素の背景色を超えない

Question

基本的に、インセットボックスの影があるサイドバーがあり、そのサイドバーの中に背景色がオレンジ色の要素のリストがあります...リストアイテムの背景色にインセットボックスの影を重ねるようにしたいと思います。

目的の効果のイメージを次に示します。

そして、これが私が現在得ている効果です：

インセット ボックスの影がオレンジ色の背景を超えていないことに注意してください。どうすればこれを達成できますか？

Answer 1

box-shadow親要素の背景色が子要素の背景を超えないのと同じように、親要素は子要素を超えません..box-shadow子にも を割り当てる必要があります..これはの jsFiddle です問題。

これを解決するには、次のようなものを使用する必要があります。

.child{
    -webkit-box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 1),inset -10px 0px 10px -10px rgba(0, 0, 0, 1);
    box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 1),inset -10px 0px 10px -10px rgba(0, 0, 0, 1);
}

これにより、子要素の両側から 1 つずつ 2 つの影が作成され、親の とシームレスに見えますbox-shadow。

この作業中の jsFiddle を表示