Comment puis-je créer des coins arrondis pour les boîtes intérieures et les bordures ?

Obtenir des coins arrondis pour les boîtes intérieures et les bordures

Comprendre le problème

L'objectif est de créer une boîte avec des coins arrondis et une bordure qui a des bordures arrondies. La propriété background-clip peut être utilisée pour obtenir les coins arrondis de la bordure. Cependant, la boîte intérieure reste rectangulaire.

Obtention des coins arrondis de la boîte intérieure

Pour arrondir les coins de la boîte intérieure, la propriété border-radius peut être utilisée. Le rayon de la bordure intérieure est calculé comme la différence entre le rayon de la bordure extérieure et la largeur de la bordure. Par conséquent, le rayon de la bordure intérieure devient :

inner border radius = outer border radius - border width

Si la largeur de la bordure est supérieure au rayon de la bordure, le rayon de la bordure intérieure devient négatif, ce qui entraîne des coins inversés. Par conséquent, la largeur de la bordure doit être prise en compte lors du calcul du rayon de la bordure intérieure.

Modification du code

Dans le code fourni, la largeur de la bordure est de 5 px et le rayon de la bordure extérieure est de 10 px. En utilisant la formule ci-dessus, le rayon de la bordure intérieure devient :

inner border radius = 10px - 5px = 5px

Le CSS modifié devient :

.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

• Pour éviter les coins arrondis sur la bordure extérieure, les propriétés -vendor-background-clip doivent être définies sur border-box.
• Les superpositions de couleurs peuvent être appliquées en JavaScript à l'aide de méthodes qui convertissent les codes de couleur hexadécimaux en valeurs décimales et effectuent les calculs nécessaires pour diminuer l'opacité. .
• Des bordures arrondies peuvent être appliquées aux boîtes intérieures et extérieures en utilisant des éléments de boîte séparés ou en créant une bordure directement sur la boîte intérieure.
• Une classe de bordures arrondies peut être créée pour appliquez efficacement des bordures arrondies à plusieurs cases.

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!