Maison >interface Web >tutoriel CSS >Comment créer une ombre de boîte CSS3 sur tous les côtés sauf un ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-06 04:14:02911parcourir

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

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn