Comment puis-je créer un effet de contour arrondi sur un élément Div ?

Simulation d'un contour arrondi sur un élément Div

Alors que la propriété border-radius permet d'arrondir les coins sur la bordure d'un élément div, cela ne fournit pas de solution pour un contour arrondi.

Cependant, une solution de contournement intelligente existe en utilisant la propriété box-shadow. L'exemple suivant montre comment créer un effet de contour lisse et 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, la propriété box-shadow crée une ombre subtile autour du champ de saisie. En définissant le rayon de propagation sur zéro, l'ombre est contrainte au bord de l'élément, créant un effet de type contour.

Les classes text1 et text2 personnalisent davantage le contour en modifiant le rayon de propagation et la couleur, ce qui entraîne dans un contour lisse ou aux bords nets.

Cette technique offre une solution flexible et élégante pour obtenir des contours arrondis sur les éléments div.

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!