Maison > interface Web > tutoriel CSS > Les éléments Div peuvent-ils avoir des coins arrondis ?

Les éléments Div peuvent-ils avoir des coins arrondis ?

Mary-Kate Olsen
Libérer: 2024-12-01 21:51:14
original
1056 Les gens l'ont consulté

Can Div Elements Have Rounded Outline Corners?

Les éléments Div s'adaptent-ils aux coins de contour arrondis ?

Les éléments Div n'ont pas la capacité d'avoir des coins de contour arrondis explicitement via la propriété border-radius. Cette limitation provient du contour carré par défaut entourant les éléments focalisables dans de nombreux navigateurs.

Solution alternative : adoption de Box-Shadow

Pour simuler l'effet des coins de contour arrondis sur div éléments, pensez à utiliser box-shadow. En appliquant stratégiquement une ombre de boîte avec des dimensions spécifiques, vous pouvez créer l'illusion d'un contour arrondi.

Mise en œuvre :

Voici un exemple de la façon d'obtenir un effet lisse contour à l'aide de box-shadow :

<input class="text1">
Copier après la connexion
input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline-color: transparent;
    transition: .1s;
}

.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}
Copier après la connexion

Pour un effet de "contour" plus dur, ajustez les dimensions de l'ombre de boîte comme suit :

.text2:focus {
    box-shadow: 0 0 0 2pt red;
}
Copier après la connexion

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 de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal