web-dev-qa-db-fra.com

Coins arrondis sur DIV avec couleur de fond

J'ai un code qui ressemble à ceci:

<div id="Shell">
    <div id="title">TITLE HERE</div>
    <div id="content">Article Content Goes Here</div>
</div>

La div Shell a une bordure grise sur laquelle je veux des coins arrondis. Le problème que je rencontre est que la div du titre a un fond vert et qu’elle chevauche les coins arrondis du Shell. Elle chevauche ou non les bords pour donner un aspect fluide.

Je recherche une solution rétro-compatible avec IE 7 et 8, mais si une solution en HTML5 était simple, je serais prêt à perdre ces navigateurs.

Merci!

csshtml5rounded-corners
19
Dexter

Dans votre balisage, vous devez attribuer border-radius à #Shell et à #title afin que les coins pointus de #title ne chevauchent pas ceux de #Shell.

Un exemple en direct, http://jsfiddle.net/BXSJe/4/

#Shell {
 width: 500px;
 height: 300px;
 background: lightGrey;
 border-radius: 6px;
}

#title {
 background: green;
 padding: 5px;
 border-radius: 6px 6px 0 0;
}
32
Mridul Kashatria

Pour ce faire, vous pouvez également définir un dépassement de capacité de la division externe sur masqué.

#Shell {
 width:500px;
 height:300px;
 background:lightGrey; 
 border-radius: 10px 10px 10px 10px;
 overflow:hidden;
}
#title {
 background:green;
 padding:5px;
}

http://jsfiddle.net/jdaines/NaxuK/

22
obiyoda

Vous voudrez probablement arrondir les deux coins supérieurs de la division du titre avec le même rayon que celui de la division Shell afin qu'ils ne se chevauchent pas. Le CSS3 que vous utiliseriez est:

border-top-left-radius: XXpx
border-top-right-radius: XXpx

Pour assurer la compatibilité avec les anciens navigateurs Mozilla, vous devez également utiliser:

-moz-border-radius-topleft: XXpx
-moz-border-radius-topright: XXpx

Et pour les anciennes versions des navigateurs WebKit (Safari, principalement), vous pouvez utiliser:

-webkit-border-top-left-radius: XXpx
-webkit-border-top-right-radius: XXpx

Pour autant que je sache, vous ne pouvez rien faire à propos des anciens navigateurs Internet Explorer, à l'exception de l'utilisation d'images.

3
EdoDodo

Internet Explorer ne supportait pas border-radius avant IE9, à la grande frustration des développeurs et des concepteurs. Avec IE9, les étapes importantes consistent à utiliser la balise META Edge et à définir le rayon de la bordure:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

Source - http://davidwalsh.name/css-rounded-corners

Je préférerais utiliser des images, mais IE peut s'en sortir. Microsoft devrait intensifier son jeu et prendre en charge CSS3.

0
Michael Schwartz

Vous pouvez utiliser PIE avec IE7 et 8. Il active certaines fonctionnalités CSS3 dans IE7 et IE8. Et oui, je sais, ce n’est pas un navigateur, c’est pénible. Peut-être une malédiction.

Vous pouvez le vérifier ici .

0
leon