Arrière-plans et bordures CSS

Arrière-plans, bordures et ombres de boîtes en action

Cet exemple de bordures, d'arrière-plans et d'ombres en boîte se compose d'images d'arrière-plan centrées composées de dégradés linéaires et radiaux. Une série d'ombres en boîte fait ressortir la bordure. L'élément de gauche a une image de bordure définie. L'élément de droite a une bordure arrondie en pointillés.

<article>
  <div></div>
  <div></div>
</article>

article {
  display: flex;
  gap: 10px;
}
div {
  color: #58ade3;
  height: 320px;
  width: 240px;
  padding: 20px;
  margin: 10px;
  border: dotted 15px; /* valeur par défaut `currentColor` */
  border-radius: 100px 0;
  background-image:
    radial-gradient(
      circle,
      transparent 60%,
      currentColor 60% 70%,
      transparent 70%
    ),
    linear-gradient(45deg, currentColor, white),
    linear-gradient(transparent, transparent);
  /* la troisième image d'arrière-plan transparente a été ajoutée pour fournir de l'espace à la couleur d'arrière-plan */
  background-color: currentColor;
  background-position: center;
  background-size:
    60px 60px,
    120px 120px;
  background-clip: content-box, content-box, padding-box;
  box-shadow:
    inset 5px 5px 5px rgb(0 0 0 / 0.4),
    inset -5px -5px 5px rgb(0 0 0 / 0.4),
    5px 5px 5px rgb(0 0 0 / 0.4),
    -5px -5px 5px rgb(0 0 0 / 0.4);
}
div:first-of-type {
  border-radius: 0;
  border-image-source: repeating-conic-gradient(
    from 3deg at 25% 25%,
    currentColor 0 3deg,
    transparent 3deg 6deg
  );
  border-image-slice: 30;
}

Les images d'arrière-plan sont définies avec la propriété CSS background-image. Les images sont centrées avec la propriété background-position. Différentes valeurs de la propriété background-clip pour les images d'arrière-plan multiples sont utilisées pour faire en sorte que les images d'arrière-plan restent à l'intérieur de la boîte de contenu. La couleur d'arrière-plan est découpée dans le cadre de remplissage, ce qui empêche l'arrière-plan d'apparaître à travers les sections transparentes pour les propriétés border-image et border-image avec la valeur dotted. Les coins arrondis de l'élément de droite sont créés à l'aide de la propriété border-image. Une seule déclaration box-shadow est utilisée pour définir toutes les ombres, tant à l'intérieur qu'à l'extérieur.

Cliquez sur « Play » dans l'exemple ci-dessus pour voir ou modifier le code de l'animation dans MDN Playground.

Référence

Propriétés CSS

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• background (version courte)
• background-position-x
• background-position-y
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-bottom (version courte)
• border-left-color
• border-left-style
• border-left-width
• border-left (version courte)
• border-right-color
• border-right-style
• border-right-width
• border-right (version courte)
• border-top-color
• border-top-style
• border-top-width
• border-top (version courte)
• border-color (version courte)
• border-style (version courte)
• border-width (version courte)
• border (version courte)
• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius
• border-top-right-radius
• border-radius (version courte)
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-image (version courte)
• box-shadow

Le module d'arrière-plan CSS niveau 4 introduit également les propriétés background-position-block, background-position-inline, background-repeat-block, background-repeat-inline, background-repeat-x, background-repeat-y et background-tbd. Actuellement, aucun navigateur ne prend en charge ces fonctionnalités.

Types de données

• Le type énuméré <line-style>

Guides

Utiliser plusieurs arrière-plans

Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.

Redimensionner les images d'arrière-plan

Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.

Redimensionner les images d'arrière-plan SVG

Comment le rapport d'aspect SVG, les valeurs de dimension SVG et la propriété CSS background-size impactent le redimensionnement des images d'arrière-plan SVG.

Utilisation de dégradés CSS

Dans cet article, on voit comment créer des images d'arrière-plan dégradées CSS.

Apprendre CSS : Arrière-plans et bordures

Dans cet article, on voit comment implémenter des images décoratives à l'aide d'images d'arrière-plan CSS.

Apprendre CSS : Le modèle de boîte

Dans cet article, on voit comment les bordures, ainsi que d'autres propriétés du modèle de boîte, affectent le modèle de boîte CSS.

Notions associées

• border-block-end-color
• border-block-start-color
• border-inline-end-color
• border-inline-start-color
• border-block-end-style
• border-block-start-style
• border-inline-end-style
• border-inline-start-style
• border-block-end-width
• border-block-start-width
• border-inline-end-width
• border-inline-start-width
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius
• box-sizing
• box-decoration-break
• text-shadow
• Le type de donnée <url>
• Le type de donnée url()
• Le type de donnée <image>
• Le type de donnée position
• Le mot-clé currentcolor

Spécifications

Voir aussi

• filter
• backdrop-filter
• Le filtre de fonction drop-shadow()
• Appliquer des couleurs sur des éléments HTML grâce à CSS
• Générateur pour border-image
• Générateur pour border-radius