問題タブ [box-shadow]

そのように、親のdivシャドウに続く外部シャドウで折り畳みコーナーを行うにはどうすればよいですか:

ありがとう。

使用してbox-shadowいますが、コンテナ全体が影で包まれます。ボックスの内側（中央上部）だけに影を付けるにはどうすればよいですか?

私が望んでいるのは、ホバー アニメーションがある div でこれらの素敵なページ リフト/カールの 1 つを取得することです。これにより、わずかなページ コーナーのカールが、アニメーション化されても div にとどまります。http://www.paulund.co.uk/creating-different-css3-box-shadows-effectsのコード例を使用/含めてみましたが、効果がまったく表示されません。:before 疑似を使用すると、何も表示されません。z-index を 100 に設定して、何らかの形で埋もれていて、まだ何もないかどうかを確認しました。せずにやろうとしたら:before を使用して、余分な影を取得しますが、変換を拒否し、下部にぶら下がっています。このページのカールを表示する方法を提案できる人はいますか? Paulund (Paul Underwood) のコードを使用して、div で「効果 3」を達成しようとしています。左下のページの角がわずかに持ち上がっていますが、残りの部分には端の周りに基本的なソフト シャドウがあります。

この効果を排除して、きれいなボックス シャドウの輝きにするにはどうすればよいでしょうか。

https://jsfiddle.net/stu9qjLp/2/

コード：

ボタンの後ろに ,:beforeを配置しようとしています。:after box-shadowしかし、トランジションは a タグの前から始まっています。私の作品の CMS では、すべてのプロパティが a タグにある必要があります。

https://jsfiddle.net/3aj5muyu/

私は、Firefox (44.0.2) が box-shadow CSS を非常に薄く/軽くレンダリングしていることを発見しました。

Chrome と Firefox の違いを比較すると、Firefox の方がずっと軽く見えます。 https://jsfiddle.net/8db8zr6q/

誰かが以前にこの問題に遭遇したことがあるかどうか、そして問題を解決するために何かできることがあるかどうか疑問に思っていましたか?

現在のコード:

問題の画像:

これがリモートで可能かどうか、または多くのコードを書き直す必要があるかどうかはわかりませんが、とにかく; ここに行きます：

下の図を見ると、達成したいのはナビゲーション バーの中央のボタン (緑色のボタン) で、他の 2 つのメニュー ボタンに影を落として、メニューに 3D っぽい外観を与えることです。

ただし、まず、ボックスではなく台形を使用しているため、ボックスの影を適切に落とすことができません。また、私はまだ SVG を扱うスキルセットを持っているとは思いません。

2 番目の問題は、緑のボタンの z-index が他の 2 つのボタンよりも低いことです。これは、実際の形状を実現する方法であるためです。

私のコードは写真の下に掲載されています。

HTML (残りの HTML は WP によって動的に生成され、サイトはまだオンラインではありません。

CSS:

私はこの CSS コードを持っていますが、Mozilla Firefox で影が機能しません:

Chrome では非常に見栄えがよく、本文のすべての要素にある種の影があり、Mozilla でもそれを実現したいと考えています。どうすればいいですか？「moz」が機能しないのはなぜですか?

ありがとうございました！