Wie erstelle ich einen CSS3-Box-Schatten auf allen Seiten außer einer?

Alle Seiten einer CSS3-Box außer einer schattieren

Das Erstellen eines CSS3-Box-Schatteneffekts auf allen Seiten eines Elements außer einer ist möglich eine knifflige Aufgabe. Lassen Sie uns untersuchen, wie Sie dies mithilfe der folgenden Schritte erreichen können:

1. Erstellen Sie einen Container für schattenlosen Inhalt:

Wenn ein Abschnitt des Elements keinen Schatten erhalten soll, erstellen Sie darin ein Div, das als Container für diesen Inhalt fungiert. Wenn die geöffnete Registerkarte beispielsweise schattenlos sein soll, erstellen Sie darin ein Div und formatieren Sie es wie folgt:

<code class="css">#content_over_shadow {
    padding: 1em;
    position: relative;
    background:#fff;
}</code>

2. Definieren Sie den Schatten für den Container:

Entfernen Sie alle unnötigen Polsterungen aus dem übergeordneten Container (in diesem Fall #content) und fügen Sie einen Box-Shadow hinzu. Dadurch wird die horizontale Schattenlinie erstellt, die sich unter allen Registerkarten außer der offenen erstreckt.

<code class="css">#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888;
}</code>

3. Schatten zu Tabs hinzufügen:

Zum Schluss fügen Sie Schatten zu den einzelnen Tabs hinzu (z. B. #nav li a):

<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;
}</code>

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