0

box-shadow を持つ 2 つの div を完全に透明なエッジと重ねることは可能ですか? 私の例では、色あせた丸みを帯びたエッジを維持したいのですが、下にあるボックスがフェードを通して見えることが重要です。しかし、ご覧のとおり、色あせたエッジは完全に透明ではないため、青色が透けて見えるのではなく、白い境界線が表示されます..

pngなどに頼らずにこれを機能させることは可能ですか?

例

.bg {
    background-image: -moz-linear-gradient(right top , rgba(255, 255, 255, 0) 0%, #FF0000 100%);
    box-shadow:  0 0 90px 90px rgba(255, 255, 255, 0) inset;
    -webkit-box-shadow:  0 0 90px 90px rgba(255, 255, 255, 0) inset;
    -moz-box-shadow:  0 0 90px 90px rgba(255, 255, 255, 0) inset;
    opacity: 0.7;
    position: absolute;
}
4

1 に答える 1

2

これが inset box-shadow で可能かどうかはわかりません。ただし、オーバーラップする要素のアウトセット ボックス シャドウを使用して、それらをシームレスにオーバーラップさせることができます。

オーバーラップする要素に、背景色と同じボックス シャドウの色を指定するだけです。

ここでサンプルを編集しました: (ベンダー固有のプレフィックスをすべてコピーしたわけではなく、box-shadow を使用しただけです)。

http://jsbin.com/orajot/4/edit

于 2013-04-28T14:52:42.930 に答える