Comment créer un rayon de bordure « inversé » en CSS : un guide complet

Rayon de bordure « inversé » : un guide complet

Dans le domaine du développement Web, obtenir les effets esthétiques souhaités peut parfois nécessiter des approches non conventionnelles. L'un de ces défis est la création d'un rayon de bordure « inversé », où les coins arrondis semblent être en retrait plutôt que saillants.

Le CSS natif peut-il gérer l'inversion ?

Malheureusement, le CSS natif ne fournit pas de solution directe au rayon de bordure inversé. Comme indiqué dans MDN, les valeurs négatives du rayon de bordure ne sont pas valides.

Solutions alternatives

1. Bibliothèques externes :

Les bibliothèques tierces peuvent simplifier la tâche de création d'effets de rayon de bordure inversé. Alors que certaines bibliothèques abordent le problème d'une manière dépassée, par exemple en utilisant des images, des approches plus récentes offrent des solutions plus efficaces.

2. CSS pur (expérimental) :

En utilisant du CSS pur, il est possible de simuler des effets de rayon de bordure inversé avec des astuces de positionnement et d'arrière-plan intelligentes. L'idée est de créer des éléments supplémentaires avec un rayon de bordure légèrement plus petit que l'élément principal et de les placer stratégiquement à l'extérieur de l'élément principal. En ajustant la couleur d'arrière-plan de ces éléments supplémentaires pour qu'elle corresponde à l'arrière-plan de la page, l'effet de coins arrondis en retrait est créé.

Mise en œuvre

Voici un extrait de code pour un pur Implémentation CSS du rayon de bordure inversé :

<code class="css">#main {
  margin: 40px; /* Adjust margins for spacing */
  height: 100px;
  background-color: #004C80;
  position: relative;
  overflow: hidden; /* Prevent content from leaking out */
}

#main div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%; /* Generous border-radius for the effect */
  background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }</code>

<code class="html"><div id="main">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>
</div></code>

En ajustant le rayon de bordure et le positionnement de ces éléments supplémentaires, vous pouvez affiner l'effet du rayon de bordure inversé comme vous le souhaitez.

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!