0Pricing
CSS Academy · Leçon

Contour et ombre de boîte

Ajoutez des contours de mise au point et des effets d’ombre autour des éléments avec outline et box-shadow.

Contour et ombre de boîte est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Propriété outline

outline dessine une ligne à l’extérieur de la bordure. Il n’affecte pas la mise en page : les éléments qui l’entourent ne se décalent pas. La syntaxe abrégée est similaire à celle de border : largeur, style, couleur.

<button class="focus-demo">Focused Button</button>

outline-offset

outline-offset éloigne outline du bord de la bordure. Les valeurs positives le repoussent vers l’extérieur ; les valeurs négatives le déplacent vers l’intérieur, avec un effet de rognage.

<button class="focus-demo">Keyboard-focused Button</button>

outline et border

Principales différences :

  • Outline n’affecte pas le flux de mise en page
  • Outline ne peut pas être défini côté par côté (il n’existe pas de outline-top)
  • Outline peut ne pas être rectangulaire (il suit la forme de l’anneau de mise au point dans certains navigateurs)
  • Outline se trouve toujours à l’extérieur de la bordure

:focus-visible et :focus

Préférez :focus-visible pour les anneaux de mise au point au clavier. Outline s’affiche uniquement lorsque la mise au point a été obtenue au clavier, et non par un clic de souris : cela évite le bruit visuel pour les utilisateurs d’un dispositif de pointage tout en préservant l’accessibilité.

<button class="focus-demo">Keyboard focus vs mouse click</button>

Principes de base de box-shadow

box-shadow ajoute un effet d’ombre autour d’un élément. La syntaxe abrégée est la suivante : décalage horizontal, décalage vertical, rayon de flou, rayon d’extension, couleur.

<div class="card">Card with soft shadow</div>

Explication des valeurs de box-shadow

Chaque valeur de box-shadow :

  • offset-x : décalage horizontal (une valeur négative signifie vers la gauche)
  • offset-y : décalage vertical (une valeur négative signifie vers le haut)
  • blur-radius : degré de flou (0 = net)
  • spread-radius : agrandissement ou réduction de la taille de l’ombre
  • color : couleur de l’ombre (RGBA est recommandé)
<div class="raised">Raised</div>
<div class="deep">Deep</div>

Ombre interne avec inset

Ajoutez le mot-clé inset pour dessiner l’ombre à l’intérieur de l’élément et créer un aspect enfoncé.

<input class="input focus-demo" type="text" value="Focused input" />

Ombres multiples avec box-shadow

Séparez plusieurs ombres par des virgules. Elles s’empilent de l’avant vers l’arrière :

<span class="badge">3</span>

box-shadow et filter: drop-shadow

box-shadow ne tient compte que de la forme de la boîte. filter: drop-shadow() suit la forme rendue, y compris la transparence : c’est idéal pour les icônes PNG dont l’arrière-plan est transparent.

<div class="icon">&#9733;</div>

Système d’élévation avec box-shadow

Material Design et les systèmes similaires définissent plusieurs niveaux d’ombre pour représenter l’élévation visuelle. Associez les variables CSS aux valeurs d’ombre :

<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>

Animer box-shadow efficacement

L’animation de box-shadow déclenche une nouvelle peinture à chaque image. Pour de meilleures performances, animez opacity d’un pseudo-élément d’ombre ou utilisez filter: drop-shadow(), qui peut être composé.

Vérification rapide

Quel mot-clé de box-shadow dessine l’ombre à l’intérieur de l’élément ?

Récapitulatif

outline dessine une ligne à l’extérieur de la bordure sans affecter la mise en page : utilisez-le pour les indicateurs de mise au point. box-shadow ajoute des ombres donnant de la profondeur grâce au décalage, au flou, à l’extension et à la couleur. Utilisez inset pour les ombres internes. Plusieurs ombres peuvent être superposées en les séparant par des virgules.

Questions Fréquemment Posées

La leçon « Contour et ombre de boîte » est-elle gratuite ?

Oui — le texte complet de « Contour et ombre de boîte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Contour et ombre de boîte » ?

Ajoutez des contours de mise au point et des effets d’ombre autour des éléments avec outline et box-shadow. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Contour et ombre de boîte » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Comprendre la largeur, la hauteur, la marge et le remplissage
  2. Styles, largeur et couleur des bordures
  3. Box-sizing : Content-Box ou Border-Box
  4. Contour et ombre de boîte
← Retour à CSS Academy