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

Création de coins de bordure à l'aide de CSS

Question : Est-il possible de créer une bordure qui n'apparaît qu'au niveau des coins d'un élément ?

Réponse :

Oui, il est possible d'obtenir cet effet en utilisant une combinaison de techniques CSS. Explorons une solution moins gourmande en code :

img {
  --s: 50px; /* Size of the corner */

  padding: 20px; /* Gap between border and image */
  border: 5px solid #B38184; /* Thickness and color of the border */

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

Ce code utilise un dégradé conique pour créer l'effet de bordure autour des coins. La valeur de --s détermine la taille des coins. La propriété padding ajoute un espace entre la bordure et l'image.

Pour la personnalisation, vous pouvez ajuster la taille et la couleur de la bordure selon vos besoins :

<img src="image1.png" alt="Image 1">

Ce code créera un plus grand bordure de couleur marron clair et un coin plus arrondi.

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!