2

側面が接触するように配置された 2 つの要素があります。接触側の寸法/サイズが異なります。どちらも下に影が必要です。

問題は、影の 1 つが常に兄弟要素をオーバーレイしていることです。私は遊ぶことができz-indexますが、それは兄弟の影で覆われる 2 つのどちらかを選択することを意味します。

要素のグループに影を追加できれば素晴らしいと思います。その場合、要素の干渉がなく、z-index垂直方向の順序に関係なく、グループの背後に影がレンダリングされます。

影の画像に頼らずに CCS3 で同様の効果を達成することは可能ですか?

4

4 に答える 4

0

内部に画像がある場合、なぜ 4 つの div がないのでしょうか? 2 つは影用、次に 2 つは上部にあり、同じ座標で影なし、背景画像のみ

于 2015-12-22T20:53:23.390 に答える
0

あなたの問題を理解しているので、デモを作成しました。何かが間違っている場合はコメントに書いてください！デモリンク

于 2013-09-03T23:28:41.470 に答える
0

別の方法の 1 つは、クリップを使用することです。

div {
    display: block;
    box-shadow: 0 0 10px 2px black;
    background-color: #fff;
    background: linear-gradient(180deg, red, white 30px);
}

#one {
    height: 200px;
    width: 200px;
    margin-left: 50px;
    position: relative;
}

#two {
    height: 50px;
    width: 50px;
    margin: 0 0 0 -50px;
    position: absolute;
    clip: rect(-10px, 50px, 100px, -10px);
}

デモ

  • 長所: div の全範囲を使用できます (グラデーションの背景で示されているように)。

  • 短所: div 番号 2 は、機能するために絶対配置する必要があります (まあ、または固定; とにかく、必要な位置はありません)

于 2013-09-04T16:10:34.830 に答える