Comment créer des coins arrondis à l'intérieur et à l'extérieur d'une boîte avec une bordure ?

Comment créer des coins arrondis à l'intérieur et à l'extérieur d'une boîte et de sa bordure

Votre question met en évidence le défi d'obtenir des coins arrondis pour à la fois la boîte intérieure et sa bordure. Pour résoudre ce problème, nous approfondirons les aspects techniques de CSS et JavaScript.

Calculs de bordure intérieure

Pour activer les coins arrondis de la boîte intérieure, vous allez vous devez ajuster la propriété background-clip sur border-box, qui est le paramètre par défaut.

De plus, le rayon de la bordure intérieure est calculé en soustrayant la largeur de la bordure du rayon de la bordure extérieure. 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 peu pratiques. Par conséquent, vous devrez calculer manuellement le rayon de la bordure intérieure.

Dans votre cas, le rayon de la bordure intérieure serait :

6px - 5px = 1px

Application des rayons de bordure

Une fois le rayon de la bordure intérieure calculé, vous pouvez mettre à jour votre CSS :

.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }

Ajout de superpositions de couleurs avec JavaScript

Pour appliquer une superposition de couleurs à l'en-tête, vous pouvez utiliser JavaScript :

// Get the background color of the body element
var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;

// Convert hexadecimal color to RGB (subject to implementation)

// Create a new element for the header
var header = document.createElement('header');

// Set the background color of the header
header.style.backgroundColor = bodyBgColor;

Application de bordure générale

Si vous utilisez une boîte séparée pour la bordure, appliquez border-radius aux deux la bordure et les cases intérieures. Alternativement, vous pouvez configurer la boîte intérieure pour qu'elle gère sa propre bordure, simplifiant ainsi le code.

En appliquant ces techniques, vous pouvez obtenir des coins arrondis à la fois pour la boîte intérieure et sa bordure.

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!