Comment puis-je obtenir un rayon de bordure inversé en CSS ?

Rayon de bordure inversé : exploration du CSS et des solutions non natives

Dans la quête de designs innovants, la question de la création d'un « rayon-bordure inversé » " Le rayon-frontière apparaît souvent. Bien que le rayon de bordure soit répandu dans la conception Web, il applique généralement des coins arrondis à l'intérieur d'un élément. Cependant, pour obtenir l'effet de coins arrondis à l'extérieur, comme le montre la flèche NOIRE dans l'image fournie, nécessite des approches alternatives.

Limitations du CSS natif

Le natif La propriété CSS border-radius ne prend pas en charge les valeurs négatives, ce qui rend impossible l'inversion directe de l'effet. Les bibliothèques comme celle suggérée dans la réponse de l'utilisateur implémentent cet effet en créant des éléments HTML supplémentaires pour imiter l'apparence souhaitée.

Approche CSS pure

En utilisant uniquement CSS, on peut créez une illusion de rayon de bordure inversé en positionnant méticuleusement des éléments supplémentaires :

1. Définissez un conteneur (#main) et ajoutez quatre éléments enfants (divs) positionnés de manière absolue.
2. Définissez l'arrière-plan couleur des éléments enfants pour correspondre à l'arrière-plan de la page.
3. Positionnez les éléments enfants légèrement à l'extérieur du conteneur en utilisant des marges négatives.
4. Appliquez un rayon de bordure aux éléments enfants, créant l'effet souhaité.

Exemple :

<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>

<code class="css">#main {
  margin: 40px;
  height: 100px;
  background-color: #004C80;
  position: relative;
  overflow: hidden;
}

#main div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #FFF;
}

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

Cette approche fournit une solution CSS pure pour le rayon de bordure inversé, tout en reconnaissant les limites de la bordure native. rayon.

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!