Comment puis-je créer des contours arrondis pour les divisions ?

Pouvez-vous tracer un div avec des coins arrondis ?

Semblable à la propriété border-radius, il est possible de donner des contours arrondis aux éléments div. Même si vous pensez peut-être que la propriété border-radius pourrait faire l'affaire, il existe une alternative qui offre plus de contrôle : box-shadow.

Par exemple, si vous avez un champ de saisie avec des bordures arrondies et que vous souhaitez ajuster le focus couleur du contour, une ombre de boîte peut être utilisée. Il offre un aspect lisse tout en permettant également de simuler un contour arrondi. Voici comment obtenir cet effet :

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

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!