How to Create a CSS3 Box Shadow on All Sides Except One?

Shading All Sides of a CSS3 Box Except One

Creating a CSS3 box-shadow effect on all sides of an element except one can be a tricky task. Let's explore how to achieve this using the following steps:

1. Create a Container for Shadowless Content:

If a section of the element that should not receive a shadow, create a div within it to act as a container for this content. For instance, if the open tab should be shadowless, create a div inside it and style it as follows:

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

2. Define Shadow for the Container:

Remove any unnecessary paddings from the parent container (#content in this case) and add a box-shadow to it. This will create the horizontal shadow line that extends beneath all tabs except the open one.

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

3. Add Shadows to Tabs:

Finally, add shadows to the individual tabs (e.g., #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>

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