問題タブ [box-shadow]

複数行のテキストが画像上に配置されています。テキストはテープのように白い背景に表示されます。テキストの各行には、左右に小さなパディングが必要です。これは、インライン テキストのボックス シャドウで実現できます。

残念ながら、firefox の結果は chrome の結果と同じではありません。しかし、Firefox の動作が正しくないとは言えません。しかし、どうすればFirefoxのクロムの結果を達成できますか?

隣接する要素は通常、それらの間に線や継ぎ目がなく、融合したように見えます)。例: http://jsfiddle.net/4m3L79w4/1/

ただし、シャドウが使用されている場合、これは当てはまらないようです。

HTML:

CSS:

「下」要素は、「上」要素の上に影を投影しますが、両方とも同じ z インデックスを持っています。

JSFiddle: https://jsfiddle.net/b4fvb7e0/1/

外観が融合するように、2 つの要素の間の影を消すことは可能ですか?

これは実際に私が作成しようとしているヘッダーの単純化されたバージョンであり、一部のページでは次の要素に融合して表示されるはずです。スタンドアロンのヘッダーと次の要素を持つ JSFiddle: http://jsfiddle.net/c8oat7vo/3/

私には欲しいものがあり、方法が見つからないことに悩まされています。

これが今の様子です：

赤い線を緑にしたい：

2 つの同一のテキストは、次の HTML を使用します。

うまく貼り付ける方法が見つかりませんでした。HTML コードの最初の行の「ドット」は気にしないでください。

これは私が現在使用しているCSSです：

私が言おうとしていることを理解していただければ幸いです。JavaScript や php は使っていません。HTMLとCSSしか使っていません。CSSコードが何をするのか説明できますか?

ボックスの影の問題に遭遇しました。

1. の優先順位はありbox-shadowますか?

例えば：

と

2番目のような設定が多いのですが、なぜいつも「moz->webkit->basic setting」なのですか?

2. box-shadow があるのに-moz-box-shadow、なぜ必要なのですか?-webkit-box-shadow

影付きのCSSタブを作成しています。ラベルの下の影を取り除くにはどうすればよいですか? 例を次に示します: http://codepen.io/ekscentrysytet/pen/QbNdEB

試してみz-index: -1;ましlabel:afterたが、影が消えます。