Comment créer une ombre de boîte sur tous les côtés sauf un pour la navigation par onglets ?

Obtenir une ombre de boîte de tous les côtés sauf un

Problème : Créez une navigation par onglets dans laquelle l'onglet ouvert a une ombre distincte, mais le toute la section d'onglet a une ombre en bas, à l'exclusion de l'onglet ouvert.

Pour relever ce défi en utilisant la propriété box-shadow de CSS3, vous devez créer une structure d'élément spécifique et utiliser des propriétés adaptables. Voici une solution complète :

Modifications CSS :

1. Créer une division supplémentaire à l'intérieur du #content :

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

2. Ajustez les styles de #content :

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

3. Ajoutez des ombres aux onglets :

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

En utilisant ces modifications CSS, vous obtenez l'effet souhaité : l'onglet ouvert a une ombre qui le distingue, et toute la section de l'onglet a une ombre cohérente en bas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!