Comment créer une ombre de boîte CSS3 sur tous les côtés sauf un ?

Ombrage de tous les côtés d'une boîte CSS3 sauf un

Création d'un effet d'ombre de boîte CSS3 sur tous les côtés d'un élément sauf un peut être une tâche délicate. Explorons comment y parvenir en suivant les étapes suivantes :

1. Créez un conteneur pour le contenu sans ombre :

S'il s'agit d'une section de l'élément qui ne doit pas recevoir d'ombre, créez un div à l'intérieur pour agir comme un conteneur pour ce contenu. Par exemple, si l'onglet ouvert doit être sans ombre, créez un div à l'intérieur et stylisez-le comme suit :

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

2. Définissez l'ombre pour le conteneur :

Supprimez tous les remplissages inutiles du conteneur parent (#content dans ce cas) et ajoutez-y une ombre de boîte. Cela créera la ligne d'ombre horizontale qui s'étend sous tous les onglets sauf celui ouvert.

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

3. Ajouter des ombres aux onglets :

Enfin, ajoutez des ombres aux onglets individuels (par exemple, #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>

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!