Comment puis-je créer des bordures CSS qui n'apparaissent que dans les coins d'un élément ?

Dilemme de bordure : afficher uniquement les bordures de coin

Si vous cherchez un moyen de créer des lignes de bordure exclusivement confinées aux coins d'un élément, CSS a ce qu'il vous faut. Ci-dessous, nous vous guiderons à travers une solution utilisant une technique connue sous le nom de « masquage ».

L'approche consiste à définir une bordure pour l'ensemble de l'élément, puis à appliquer un masque pour masquer sélectivement la bordure, à l'exception des coins. Ceci peut être réalisé à l'aide des fonctions conic-gradient() et Linear-gradient().

Voici comment procéder :

img {
  --s: 50px; /* Adjust this value to change the corner size */
  
  padding: 20px; /* Modify this value to alter the gap between the border and image */
  border: 5px solid #B38184; /* Change the border thickness and color as needed */
  -webkit-mask:
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
}

Le conic-gradient() crée un dégradé qui masque la bordure sauf dans les coins, tandis que la fonction Linear-gradient() garantit que l'espace entre la bordure et l'image reste transparent.

En ajustant la --s, vous pouvez contrôler la taille des bordures des coins. Dans l'exemple ci-dessus, la taille est définie sur 50 px, ce qui vous donne des angles nets.

Vous pouvez désormais intégrer cette technique dans vos projets pour créer des bordures visuellement attrayantes qui mettent en valeur les coins de vos images ou d'autres éléments.

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!