要素の 1 面を除くすべての面をシェーディングするカスタム ボックス シャドウを作成するにはどうすればよいですか?

要素の特定の側面にボックス シャドウを適用する

この CSS3 関連の質問では、ユーザーは、従来のボックス シャドウとは異なり、カスタム ボックス シャドウを作成しようとしています。 box-shadow は、要素の 1 面を除くすべての面をシェーディングします。望ましい結果は、開いているタブに影が表示され、タブ セクション全体の下部に別の影が表示されるタブ付きナビゲーション バーを持つことです。

この問題に取り組む鍵は、 box-shadow プロパティ。 CSS3 の box-shadow は 4 つの個別の値を取ります:

1. 水平オフセット: 左または右への影の距離
2. 垂直オフセット: 上または下の影の距離
3. ぼかし半径: 影に適用されるぼかしの量
4. 広がり: のサイズにオフセットが追加されます。シャドウ ボックス

この特定のシナリオでは、これらの値を操作することで特定の側面のみのシェーディングを制御できます。

全体の上面と内向きの側面のシャドウを作成するにはタブ セクションでは、最初の 2 つの値を 0 (ゼロ オフセット) に設定し、それに応じてぼかし半径と広がりを調整します。

個々のタブの影については、#content 要素内に div を作成し、それを相対的に配置します。親。新しい div は単色の背景を受け取り、その影が定義されます。親 #content 自体のパディングが削除され、別のシャドウが追加されています。

最後に、各タブにシャドウを適用するために、#nav li 要素内のアンカーをターゲットにします。これらを親に対して相対的に配置し、必要な影の値を定義します。

これらの技術を採用することにより、ユーザーは開いた要素を除くタブ要素のすべての側面で必要なシェーディング効果を実現し、効果的に区別することができます。他のタブから。

以上が要素の 1 面を除くすべての面をシェーディングするカスタム ボックス シャドウを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。