タブ付きナビゲーション用に 1 つを除くすべての面にボックス シャドウを作成するにはどうすればよいですか?

1 面を除くすべての面でボックス シャドウを実現する

問題: 開いているタブに明確なシャドウがあるタブ付きナビゲーションを作成しますが、開いているタブを除く、タブ セクション全体の下部に影が表示されます。

CSS3 の box-shadow プロパティを使用してこの課題に対処するには、特定の要素構造を作成し、適応可能なプロパティを利用する必要があります。包括的な解決策は次のとおりです:

CSS の変更:

1. #content 内に追加の Div を作成:

<code class="css">#content_over_shadow {
    padding: 1em;
    position: relative;
    background:#fff;    /* Use a solid, non-transparent background */
}</code>

2. #content スタイルの調整:

<code class="css">#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888;   /* Create a line shadow along the bottom */
}</code>

3. タブに影を追加:

<code class="css">#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888;   /* Add shadows to individual tabs */
}</code>

これらの CSS 変更を使用すると、目的の効果が得られます。開いているタブには、それを際立たせる影が付き、タブ セクション全体の下部に沿って一貫した影が付きます。

以上がタブ付きナビゲーション用に 1 つを除くすべての面にボックス シャドウを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。