Comment créer des coins arrondis pour la boîte intérieure et sa bordure en CSS ?

Comment obtenir des coins arrondis pour la boîte intérieure et sa bordure

En CSS, les coins arrondis peuvent être appliqués à l'aide du rayon de bordure propriété, qui accepte une valeur en pixels ou en pourcentages. Cependant, lorsque vous utilisez cette propriété pour créer des coins arrondis à la fois pour une boîte intérieure et sa bordure, il est nécessaire de prendre en compte l'effet de la largeur de la bordure.

Calcul du rayon de la bordure intérieure

Pour calculer le rayon de la bordure intérieure, soustrayez la largeur de la bordure du rayon de la bordure extérieure. Cela garantit que les coins intérieurs de la boîte ont la rondeur souhaitée tandis que la bordure conserve son aspect arrondi.

Par exemple, si vous souhaitez un rayon de bordure extérieure de 6 px et une largeur de bordure de 5 px, le rayon de bordure intérieure devrait être :

inner border radius = 6px - 5px = 1px

Ajustement du code CSS

Dans le code fourni, les modifications suivantes doivent être apportées :

.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }

Cela ajuste le rayon de la bordure extérieure à 6px. Les propriétés background-clip doivent être supprimées ou définies sur border-box pour permettre le rayon de bordure interne.

.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); }

Superposition et bordures

Si une boîte séparée est étant utilisée pour la bordure, la propriété border-radius doit être appliquée à la fois à la zone de bordure et à la zone intérieure. Alternativement, une approche plus efficace consiste à gérer la bordure à l'intérieur de la boîte intérieure elle-même.

Bordures générales

Pour appliquer des coins arrondis à plusieurs boîtes de manière cohérente, envisagez d'utiliser un classe comme .rounded-borders et en l'appliquant aux éléments pertinents.

.rounded-borders {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}

<div></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!