How to Create a Box-Shadow on All Sides But One for Tabbed Navigation?

Achieving Box-Shadow on All Sides But One

Problem: Create a tabbed navigation where the open tab has a distinct shadow, but the entire tab section has a shadow along the bottom, excluding the open tab.

To address this challenge using CSS3's box-shadow property, you need to create a specific element structure and utilize adaptable properties. Here's a comprehensive solution:

CSS Modifications:

1. Create an Additional Div Inside #content:

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

2. Adjust #content Styles:

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

3. Add Shadows to Tabs:

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

By using these CSS modifications, you achieve the desired effect: the open tab has a shadow that sets it apart, and the entire tab section has a consistent shadow along the bottom.

The above is the detailed content of How to Create a Box-Shadow on All Sides But One for Tabbed Navigation?. For more information, please follow other related articles on the PHP Chinese website!