Comment puis-je créer des contours arrondis pour les éléments Div à l'aide de Box-Shadow ?

Création d'un contour arrondi pour les éléments Div avec Box-Shadow

La personnalisation de l'apparence du contour d'un élément div peut améliorer l'expérience utilisateur et l'esthétique visuelle. En utilisant la propriété box-shadow, nous pouvons obtenir des coins arrondis similaires à la fonctionnalité border-radius pour le contour de l'élément.

Pour illustrer cette technique, considérons un scénario dans lequel vous disposez d'un champ de saisie avec des bordures arrondies et souhaitez pour modifier la couleur du contour lorsqu'il reçoit le focus. Le contour carré conventionnel peut être peu attrayant.

Solution :

Au lieu d'essayer d'arrondir le contour à l'aide de méthodes conventionnelles, exploitez la propriété box-shadow. Cette solution offre une apparence plus fluide et plus personnalisable. En ajustant les paramètres de box-shadow, nous pouvons créer un pseudo-contour qui imite fidèlement un contour arrondi :

  input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline-color: transparent; /* for high contrast modes */
    transition: .1s;
  }

  /* Smooth outline with box-shadow: */
  .text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
  }

  /* Hard "outline" with box-shadow: */
  .text2:focus {
    box-shadow: 0 0 0 2pt red;
  }

Dans cet exemple, l'élément d'entrée a initialement un rayon de bordure de 2 points, mais la boîte La propriété -shadow ajoute une ombre grise de 1 pt autour de l'élément. Lorsque l'élément reçoit le focus, l'ombre de la boîte augmente à 3 points avec la couleur bleu bleuet pour un contour plus lisse. De plus, vous pouvez créer un contour plus distinct en définissant l'ombre de la boîte sur 0 0 0 2pt rouge.

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!