それぞれ可変幅の 2 つの要素にボックス シャドウを追加しようとしています。私の望ましい結果は次のようになります。

重なっているボックスの影を覆う疑似要素を使用してこの結果を得ようとしましたが、透過性が必要なため、ボックスの端に小さな重なりがない解決策を見つけることができないようです疑似要素も正しい幅に調整されません。私の問題を解決するために、上部のボックスに必ずしも上部の境界線が必要なわけではありません。

フィドル

HTML:

SCSS:

編集：

通常、私はレイアウトに JS を考慮しませんが、私の特定のケースでは、ユーザーの操作が発生するまでボックスが表示されないため、スクリプトを使用して問題を解決しました。スクリプトは、DOM の準備ができたときに上の要素が下の要素よりも大きいかどうかを判断し、それぞれに「大きい」または「小さい」クラスを追加します。それを知ることで、疑似要素の幅がどの要素を継承する必要があるかがわかります。どの要素が大きいかを変更するような方法で要素のサイズが変更されない限り、これはうまく機能します。

また、JS を必要とせず、ボックス サイズのぼかしのみが必要でスプレッドが不要な場合に備えて、疑似要素が 1 つ少ない、よりクリーンなソリューションもあります。

フィドル:

ぼかしと広がりの組み合わせ（JS）、

ぼかしのみ、見開きなし（JSなし）

すべての白い背景が黒に置き換えられているこのスクリーンショットでわかるように、最終結果は完全ではありません。

左ボックスの左上を見ると、ボーダーの影が少しカーブしているのがわかります。とにかく、それは私に十分に近いです。

cssのみを使用して最初のフィドルと同様の結果をもたらすソリューションを誰かが見つけたら、本当に感謝します。

幅の異なる 2 つの div の周りに CSS のボックス シャドウを配置し、真下の画像のようにシームレスに見えるように、重なり合ったシャドウを何とか非表示にしようとしています。

最初の要素に白い境界線を追加して、2 番目の要素に拡張しようとしましたが、境界線がボックス シャドウの内側に表示されます。また、コンテナにボックス シャドウを配置しようとしましたが、探しているものではない四角形のシャドウになります。この効果を得る方法はありますか？

私の試み: http://jsfiddle.net/1vy2q4L0/

私は現在、メインの「ウェルカム テキスト」に複数の行が含まれるデザインのサイトに取り組んでいます (これは製品に関する短い紹介であるため)。これは、透明な (0.7) 白の背景 (rgba(255,255,255,0.7)複数行のパディング付き。はい、複数行のパディングです。つまり、テキストのすべての行には、上下左右のパディング、背景色、および小さな行間の透明なスペース。

これを実現するために、水平方向のオフセットを持つボックス シャドウを使用して、各行の左右のパディングをシミュレートしました。これは、Internet Explorer を除くすべてのブラウザーで機能します。サイトをすべてのブラウザーで動作させたいので、しばらくの間この問題を修正しようとしましたが、これはインターネット エクスプローラーの問題であるという結論にほぼ達しました。

Geoff Muskett の例を使用しました ( http://geoffmuskett.com/text-with-background-padding-on-the-end-of-each-line-and-a-gap-between-lines/ ) 。 IEを除いて例外として。

問題は、IE でページを開くと、ぼかしを 0 ピクセルに設定しても、ボックスの影がややぼやけてレンダリングされるように見えることです。（または追加しなかっただけで、両方とも機能しませんでした）。

Geoff の例のコードでさえ機能しません。

HTML

CSS

この問題を知っていて、あまりハックではない (好ましくない) 解決策があるかどうかを知っている人はいますか?

IE 11.0.9600.17905

編集

2015 年 8 月 3 日 09:32

私は今週末、この問題を調査しており、現在私が抱えている問題とまったく同じ問題を抱えている人々の投稿をいくつか見つけました。これは IE のレンダリング バグのようです。参照: https://connect.microsoft.com/IE/feedback/details/810756/ie-11-gap-between-element-background-and-its-box-shadow

また、別の StackOverflow の投稿で、@nickmorss という名前の誰かが、box-shadowIE11 と FF34+ では複数行の埋め込みテキストを実現するために を使用すると述べています。FFを使用して修正できますbox-decoration-break: clone;が、これは私の側では機能しません。

これはほとんどバグではないので、CSS で自分で修正することはできないと思います。

はめ込み枠のある木枠を作ろうとしています。ボーダー画像を作成し、インセットと通常のボックス シャドウを適用しました。通常の影は、ドロップ シャドウとしてうまく機能します。挿入された影は、多くのピクセルによってオフセットされます。何がうまくいかず、修正できますか? 私は、テキストが印刷される場所に、木枠から数ピクセル離れていない、木枠にぴったりとはめ込まれた影を配置しようとしています。

各ページに最初に移動したときにトップ メニューのボックス シャドウが表示されず、スクロールを開始すると表示される理由を突き止めるために、私は長い間試みてきました。

これはサイトです: http://gourmetsailing.co.nz/DRAFT/charters.html

影のあるクラスは .navbar-wrapper です

メニューをページの上部に固定するために stickUp も使用していることに言及する価値があります: http://lirancohen.github.io/stickUp/

おそらく、そのスクリプトと何らかの競合がありますか？

小さな問題があります。写真に 45 度の影を作成したいと考えています。しかし、コードを使用すると、オブジェクトも回転します。そこで、この問題について助けを求めたいと思います。

私のコード:

css の高度な境界線とボックス シャドウに関するチュートリアルはどこにありますか?

私はcssの形を発見しましたが、これを説明することはできません:

リンク

誰がそれがどのように機能するか説明できますか? これはすべてのブラウザに対応していますか?

ありがとう。