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

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">

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

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

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!