La bordure intérieure calculs
Tout d'abord, vous aurez besoin de supprimer -vendor-background-clip: padding-box ou d' border-box de la valeur par défaut afin d'atteindre l'intérieur des frontières de rayon.
Le cadre intérieur rayon est calculé comme la différence de la frontière extérieure de rayon (border-radius) et la largeur de la bordure (border-width) tels que
inner border radius = outer border radius - border width
Chaque fois que l' border-width est supérieure à la border-radius, à l'intérieur des frontières de rayon est négatif et vous obtenez certains maladroits inversé les coins. Actuellement, je ne crois pas qu'il existe une propriété pour le réglage de l' inner-border-radius, de sorte que vous aurez besoin de calculer manuellement.
Dans votre cas:
inner border radius = 6px - 5px = 1px
Votre nouveau CSS devrait être:
.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); }
Il suffit de soustraire le border-radius (6px) les valeurs de l' border-width de la valeur (5px) afin d'atteindre les résultats souhaités intérieure-border-radius:
Code qui fonctionne pour moi
Testé sur Firefox 3.x, Google Chrome et Safari 5.0
.radius-all { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); } /* Note that white on white does not distinguish a border */
En ajoutant de la couleur des superpositions en JavaScript
<script type="text/javascript">
var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;
// insert opacity decreasing code here for hexadecimal
var header = document.getElementsByTagName('header')[0];
header.style.backgroundColor = bodyBgColor;
</script>
Je ne suis pas entièrement sûr de savoir comment faire hexadécimal arithmétique en JavaScript mais je suis sûr que vous pouvez trouver un algorithme dans Google.
L'Application Générale Des Frontières
Êtes-vous à l'aide d'une boîte séparée <div> pour votre frontière par le biais de son background de la propriété? Si oui, vous aurez besoin d'appliquer border-radius et son fournisseur des propriétés spécifiques à la fois la zone de bordure et à l'intérieur de la boîte:
<div id="border-box" style="border-radius: 5px;">
<div id="inner-box" style="border-radius: 5px;">
</div>
</div>
Une façon beaucoup plus efficace serait tout simplement avoir à l'intérieur de la zone de gérer ses propres frontières:
<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
<!-- Content -->
</div>
CSS-sage, vous avez juste à déclarer .rounded-border de la classe et de l'appliquer à chaque zone ont des bords arrondis:
.rounded-borders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
Et de les appliquer à la classe de toutes les boîtes qui ont des bords arrondis:
<div id="border-box" class="rounded-borders">
<div id="inner-box" class="rounded-borders">
</div>
</div>
Pour un seul élément de boîte, vous serez toujours tenus de déclarer la taille de la bordure afin d'être montré:
<style type="text/css">
#inner-box { border: 4px solid blue; }
</style>
<div id="inner-box" class="rounded-borders">
</div>
