How to Create a CSS3 Box-Shadow on All Sides of an Element Except the Bottom?

Creating a CSS3 Box-Shadow on All Sides But One: A Comprehensive Solution

Problem: Designing a tabbed navigation bar, you need to highlight the open tab with a CSS3 box-shadow. However, you want to exclude the bottom shadow of the open tab to avoid obscuring a shadowed content area.

Approach:

To achieve this, we can utilize a combination of positioning and box-shadow properties.

Implementation:

1. Create a <div> element within the #content div and assign it the following style:

<code class="css">#content_over_shadow {
    position: relative;  /* Positions the element relative to its parent */
    background:#fff;  /* Sets a solid background to prevent transparency */
}</code>

2. Adjust #content style and add a box-shadow:

<code class="css">#content {
    box-shadow: 0 0 8px 2px #888;  /* Shadow for the bottom line */
}</code>

3. Apply shadows to the tabs:

<code class="css">#nav li a {
    box-shadow: 0 0 8px 2px #888;  /* Shadow for each tab */
    background:#FFF;  /* Ensure a solid background for shadow visibility */
}</code>

Explanation:

The relative positioning of #content_over_shadow allows it to overlap the shadowed #content div. By setting a solid background, we block the transparency of #content, allowing the shadow to be visible.

Adding box-shadow properties to each tab highlights the open tab while maintaining shadows on all other tabs. You can adjust the offset, spread, and color of the box-shadows to customize the appearance.

The above is the detailed content of How to Create a CSS3 Box-Shadow on All Sides of an Element Except the Bottom?. For more information, please follow other related articles on the PHP Chinese website!