Comment faire des coins ronds à la fois à l’intérieur d’une boîte et de sa bordure?

Je suppose que le titre est un peu difficile à comprendre, alors je vais vous expliquer. J’essaie d’atteindre cet effet:

entrer la description de l'image ici

(une boîte aux coins arrondis et à la bordure arrondie).

J’ai réussi à le faire en utilisant la propriété background-clip :

entrer la description de l'image ici

(coins arrondis pour bordure mais pas pour boîte intérieure)

La question est, comment puis-je atteindre des coins arrondis pour la boîte intérieure?

Je vous remercie!

MODIFIER

Le code HTML que j’utilise:

 

Et le CSS:

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

Calculs de bordure intérieure

Tout d’abord, vous devez supprimer -vendor-background-clip: padding-box ou définissez-les sur border-box par défaut afin d’obtenir le rayon de la bordure intérieure.

Le rayon de la bordure intérieure est calculé comme la différence entre le rayon de la bordure extérieure (rayon border-radius ) et la largeur de la bordure (largeur de la border-width ) de telle sorte que

inner border radius = outer border radius - border width

Lorsque la border-width de la border-radius est supérieure au border-radius de la border-radius , le border-radius la bordure intérieure est négatif et vous obtenez des coins inversés peu pratiques. Actuellement, je ne pense pas qu’il existe une propriété pour ajuster le inner-border-radius , vous devrez donc le calculer manuellement.

Dans ton 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 les valeurs border-radius (6px) de la valeur border-width (5px) afin d’obtenir le rayon de bordure interne souhaité:


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 */ 

Ajout de superpositions de couleurs en JavaScript

  

Je ne suis pas tout à fait sûr de savoir comment faire de l’arithmétique hexadécimale en JavaScript, mais je suis sûr que vous pouvez trouver un algorithme dans Google.


Application des frontières générales

Utilisez-vous une boîte séparée

pour votre bordure via sa propriété d’ background ? Si c’est le cas, vous devrez appliquer les propriétés border-radius et ses propriétés spécifiques à la fois à la zone de bordure et à la boîte interne:

 

Un moyen beaucoup plus efficace serait simplement que la boîte interne gère sa propre bordure:

 

Au niveau CSS, vous pouvez simplement déclarer une classe .rounded-border et l’appliquer à chaque case qui aura des bordures arrondies:

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

Et appliquez la classe à toutes les cases qui auront des bordures arrondies:

 

Pour un élément simple, vous devrez toujours déclarer la taille de la bordure pour pouvoir afficher:

  

Une autre solution consiste à faire correspondre les bordures intérieures et extérieures avec border-radius pour “simuler” la bordure en utilisant la valeur de la propriété box-shadow . Cela produit une ombre solide qui peut facilement passer pour une bordure régulière.

Par exemple, pour obtenir une bordure 4px et un rayon de bordure blanc 4px, essayez ceci:

 /* rounded corners */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; /* drop shadow */ -webkit-box-shadow: 0px 0px 0px 4px #fff; -moz-box-shadow: 0px 0px 0px 4px #fff; box-shadow: 0px 0px 0px 4px #fff; 

Si vous souhaitez append une “vraie” ombre scope à l’ensemble du conteneur, vous pouvez simplement enchaîner vos instructions masquées comme suit:

 /* drop shadow */ -webkit-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0), 1px 1px 8px 0 rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0), 1px 1px 8px 0 rgba(0,0,0,0.4); box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0), 1px 1px 8px 0 rgba(0,0,0,0.4); 

Remarque: Gardez à l’esprit que l’ordre des instructions est l’ordre dans lequel il sera rendu.

La seule chose à prendre en compte est que la “fausse bordure” initiale chevauche les X premiers pixels (où X est la largeur de la bordure) de toute ombre souhaitée (et se combine si vous utilisez l’opacité RGBa sur celle-ci). en dessous de 100%.)

Donc ça ne marchera pas dans toutes les situations, mais ça aura la majorité. Je l’utilise assez souvent lorsque les frontières normales ne sont pas idéales.

Comme il n’y a pas de inner-border-radius pour CSS, les navigateurs le placent par défaut sur border-radius - border-width . Si vous n’aimez pas cela, la solution typique consiste à créer deux divs avec des bordures pour imiter le rayon de la bordure intérieure, mais cette solution apporte plus de design au HTML. C’est aussi un problème si c’est un modèle de bordure commun utilisé à travers le site.

J’ai réussi à trouver un moyen de garder tout cela en CSS en produisant la div interne en utilisant :after et content: "" . Donc pour votre cas ce serait:

 .template-border { position: relative; border-radius: 5px; background-color: #000; border: 10px solid #000; z-index: -2; } .template-border:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; border-radius: 5px; background-color: #FFF; z-index: -1; } 

Vous devez avoir deux éléments div, l’un dans l’autre, et utiliser un css de coin arrondi avec plusieurs navigateurs, comme ceci:

 .small-rounded { border: 1px solid ##000; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-radius: 5px; } 

Le problème n’est pas le codage du CSS mais les mathématiques d’un cercle. Essentiellement, votre border-inner-radius (je sais que cette propriété n’existe pas) est égal au border-radiusborder-width .

Tout simplement, déterminez ce que vous voulez que votre rayon interne soit, puis ajoutez la largeur de la bordure pour obtenir l’effet désiré.

border-inner-radius + border-width = border-radius

Basé sur l’idée de Leo Wu, voici ma solution:

 .my-div { background-color: white; border: solid 20px black; border-radius: 10px; box-shadow: 0 0 10px black; height: 100px; left: 30px; position: relative; top: 20px; width: 200px; } .my-div:before { background-color: white; border-radius: 5px; content: ""; display: block; height: calc(100% + 20px); left: -10px; position: absolute; top: -10px; width: calc(100% + 20px); z-index: 1; } .some-content { height: calc(100% + 20px); left: -10px; position: relative; top: -10px; width: calc(100% + 20px); z-index: 3; } .some-header { background-color: green; border-radius: 5px 5px 0 0; height: 30px; } 
   
my title
some other content

Vous devez rendre le rayon de la bordure supérieur à la largeur de la bordure jusqu’à ce que vous commenciez à voir une courbe. Ce n’est pas une formule définie pour définir le rayon de la frontière de + 1px supérieur à la largeur de la bordure. Cependant, ce sera certainement une valeur positive. Vous devez expérimenter dans les différents navigateurs où vous en avez besoin jusqu’à ce que vous voyiez la plus petite valeur possible de bordure-rayon qui vous convient dans la plupart des navigateurs. (Certains navigateurs peuvent ne pas le supporter.) Par exemple, dans Google Chrome, j’ai défini une largeur de bordure à 10 pixels, mais j’ai dû définir le rayon de la bordure à 13 pixels avant de commencer à voir une courbe de bordure interne travaillé encore mieux.