問題タブ [box-shadow]

3 つの div があり、外側 (1px の div) から大きな中央の div に影を落として、インセットを「偽造」したいと考えています。

z-index を使用するかどうかは気にしません (浮動可能性があります)。それを解決するための最良の方法は何でも構いません。

影が表示されないのはなぜですか？

最終結果は次のように「見える」はずです。

ただし、3つのdivを使用した「偽の挿入」ソリューションが必要です。

それでもわからない場合。上部と下部の div は、中央の div に影を落とす必要があります。これにより、中央の div に 2 つの影が挿入されているように見えます。

なぜこのようにしたいのかを説明することはできますが、質問は単純にしたいと思います。

問題のフィドル 1

これが問題のフィドルです: Fiddle 1

この特定の例では、左上の境界半径を 100% 使用し、他のすべての境界半径は 0% で、高さは幅と等しく、象限を生成しています。

ここで、x、y オフセットを使用してメイン要素に 3 つのインセット ボックス シャドウを追加しました。次のように、ボックスの影が曲線をたどり、互いに平行になることを期待しています。

これは代わりに出力です：

問題のフィドル 2

これは、曲線に従わないボックス シャドウの別の例です。これは xy オフセットなしです。フィドル 2

この場合、ピンク色の領域は象限のはずですが、三角形のように見えます。

スプレッド半径が大きくなると、インセット ボックス シャドウのカーブが失われるのはなぜですか? バグですか？すべての主要なブラウザーが同じ出力を提供するため、1 つではないようです。

内部ボックスの影を含む div がありますが、これらの影は別の div で覆われています。私は postion:relative で試しましたが、何も変更されません。

これが例です コード例

前もって感謝します ！

したがって、私の Web サイトにはヘッダーと、その直後に Revolution Slider を含む div があります。ヘッダーの下とスライダーの上にボックスシャドウを追加しようとしています。しかし、ヘッダーにも追加しない限り、機能しませんが、それではmargin-bottom演習全体が意味をなさないものになります。

これはコードです：

誰かがこれを引き起こしている原因を突き止めるのを手伝ってもらえますか?

これがだまされている可能性があることはわかっていますが、複数のソリューションを調査したことに自信があるので、喜んでヒットします.

This box-shadow transition を機能させるために、次のような多くの方法を試しました。

• box-shadow宣言で 16 進数、RGB、RGBA の色を切り替えます。
• より具体的なセレクターの使用。
• 宣言の最後transitionに含めるプロパティを変更します。ease-in-out
• transition要素に影響を与える可能性のあるすべてのプロパティの CSS ファイルをクレンジングしました。
• その間ずっと、スペルミスをトリプルチェックしています。

検査官は、私のスタイルは上書きされていないと言っています。これが私のコードです：

これが何もしない原因はここで何が起こっているのでしょうか?

これは、コンテキスト内での体験のための私のサイトへのリンクです。ページの右上隅にあるヘッダー メニューです。

テキストまたは html タグにグラデーション シャドウを生成する関数を使用しています。影の角度が同じでない理由がわかりません。

HTML タグで同じ結果を得るには、シャドウの y 位置を 2 で除算する必要があります (結果を表示するには、Codepen の例の SCSS (l.14-l.16) でこの 3 行のコメントを解除する必要があります)

のように見える

コメントした行

コメントされていない行

この場所を使用してスライドショーを作成しましたが、CSS の特定の制限により、box-shadow プロパティを IMG に設定することはできません。

ただし、問題はスクリプトの性質によるもので、IMG の実行が完了すると、div に遭遇します。

div は装飾にのみ使用されるため、スクリプトは div に遭遇することは想定されていません (これも、box-shadow は IMG に使用できないためです)。#slideshadow div を無視するように、誰かがコードのフォーマットを手伝ってくれることを望んでいました。

HTML (CSS のおかげで置換写真で編集、寸法が必要でした):

CSS:

脚本：