Wie erstelle ich einen Box-Shadow auf allen Seiten außer einer für die Tab-Navigation?

Kastenschatten auf allen Seiten außer einer erzielen

Problem: Erstellen Sie eine Tab-Navigation, bei der der geöffnete Tab einen deutlichen Schatten hat, der aber Der gesamte Tab-Bereich weist am unteren Rand einen Schatten auf, mit Ausnahme des geöffneten Tabs.

Um diese Herausforderung mithilfe der Box-Shadow-Eigenschaft von CSS3 zu bewältigen, müssen Sie eine spezifische Elementstruktur erstellen und anpassbare Eigenschaften verwenden. Hier ist eine umfassende Lösung:

CSS-Änderungen:

1. Erstellen Sie eine zusätzliche Div innerhalb des #Inhalts:

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

2. #Inhaltsstile anpassen:

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

3. Schatten zu Tabs hinzufügen:

<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>

Durch die Verwendung dieser CSS-Änderungen erzielen Sie den gewünschten Effekt: Der geöffnete Tab hat einen Schatten, der ihn hervorhebt, und der gesamte Tab-Bereich hat einen einheitlichen Schatten am unteren Rand.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Box-Shadow auf allen Seiten außer einer für die Tab-Navigation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!