Comment créer des coins arrondis pour l’intérieur et la bordure d’une boîte ?

Création de coins arrondis pour l'intérieur d'une boîte et sa bordure

Dans la conception Web, ajouter des coins arrondis à la fois à l'intérieur d'une boîte et à sa bordure. sa bordure peut améliorer l'attrait visuel d'un élément.

Calcul du rayon de la bordure intérieure

Pour créer des coins arrondis pour la boîte intérieure, déterminez le rayon de la bordure intérieure. Il est calculé comme la différence entre le rayon de la bordure extérieure et la largeur de la bordure :

inner_border_radius = outer_border_radius - border_width

Par exemple, si le rayon de la bordure extérieure est de 10 px et la largeur de la bordure est de 5 px, le rayon de la bordure intérieure serait de 5 px.

Ajustement des propriétés CSS

Dans le code CSS fourni, vous pouvez supprimer les propriétés background-clip spécifiques au fournisseur (-moz-background-clip et -webkit-background -clip) ou définissez-les sur border-box pour obtenir le rayon de la bordure intérieure. De plus, mettez à jour le rayon de la bordure intérieure à l'aide du calcul mentionné ci-dessus.

Extrait de code :

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

.template-bg {
  background: #FFF;
}

.template-border {
  border: 5px solid rgba(255, 255, 255, 0.2);
}

Considérations supplémentaires :

• Si la largeur de la bordure est plus large que le rayon de la bordure extérieure, le rayon de la bordure intérieure deviendra négatif, ce qui entraînera des coins inversés.
• Vous pouvez appliquer des bordures arrondies à des cases individuelles ou créer une classe CSS pour faciliter l'application à plusieurs éléments.
• JavaScript peut être utilisé pour ajouter des superpositions de couleurs à l'en-tête et obtenir facilement la couleur d'arrière-plan du corps au format hexadécimal pour plus de cohérence.

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!