Maison >interface Web >tutoriel CSS >Comment puis-je créer des contours arrondis pour les divisions ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-30 15:31:18339parcourir

How Can I Create Rounded Outlines for Divs?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn