Maison > interface Web > tutoriel CSS > Comment puis-je obtenir des effets de rayon de bordure « inversé » en CSS ?

Comment puis-je obtenir des effets de rayon de bordure « inversé » en CSS ?

DDD
Libérer: 2024-10-29 21:23:29
original
1131 Les gens l'ont consulté

How can I achieve

Alternatives au Border-Radius « inversé »

Bien que la propriété border-radius native de CSS n'autorise pas les valeurs négatives, il existe des solutions de contournement et des approches alternatives pour obtenir des effets similaires.

Solution CSS :

Une approche consiste à créer des éléments supplémentaires dans le conteneur, à définir leur arrière-plan pour qu'il corresponde à l'arrière-plan de la page et à les positionner. les juste à l'extérieur de l'élément principal. Ensuite, appliquez un rayon de bordure aux éléments extérieurs pour créer l'effet perçu de coins inversés.

Voici un extrait CSS démontrant cette technique :

<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>
Copier après la connexion

Approche basée sur une bibliothèque :

Si vous le souhaitez, vous pouvez utiliser des bibliothèques externes spécialement conçues pour gérer cette fonctionnalité, telles que :

  • [negative-border-radius](https://github. com/filamentgroup/negative-border-radius)
  • [Courbes de bordure](https://github.com/4dreplay/border-curves)
  • [css-corners](https:/ /github.com/jonschlinkert/css-corners)

Ces bibliothèques étendent généralement les capacités CSS et fournissent des options supplémentaires pour personnaliser les effets de bordure, y compris les coins inversés.

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 de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal