Création de coins arrondis à L'aide de CSS [fermé]

J'ai regardé cela très tôt dans la création de Stack Overflow et je n'ai pas trouvé de méthode pour créer des coins arrondis qui ne me laissaient pas sentir que je venais de traverser un égout.

CSS3 définit enfin le

border-radius:

Ce Qui est exactement comment vous voulez que cela fonctionne. Bien que cela fonctionne bien dans les dernières versions de Safari et Firefox, mais pas du tout dans IE7 (et je ne pense pas dans IE8) ou Opera.

En attendant, c'est des hacks tout le long. Je suis intéressé à entendre ce que les autres pensent être la façon la plus propre de le faire à travers IE7, FF2/3, Safari3 et Opera 9.5 pour le moment..

Je reçois généralement des coins arrondis juste avec css, si le navigateur ne supporte pas qu'ils voient le contenu avec des coins plats. Si les coins arrondis ne sont pas si critiques pour votre site, vous pouvez utiliser ces lignes ci-dessous.

Si vous voulez utiliser tous les coins avec le même rayon, c'est le moyen le plus simple:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

Mais si vous voulez contrôler chaque coin, c'est bon:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

Comme vous le voyez dans chaque jeu de styles spécifiques au navigateur et sur le quatrième lignes, nous déclarons en nous supposons qu'à l'avenir les autres (espérons-le aussi) décident d'implémenter la fonctionnalité pour que notre style soit prêt pour eux aussi.

Comme indiqué dans d'autres réponses, cela fonctionne à merveille sur Firefox, Safari, Camino, Chrome.

Si vous êtes intéressé par la création de coins dans IE, cela peut être utile - http://css3pie.com/

Je recommande d'utiliser des images d'arrière-plan. Les autres moyens ne sont pas aussi Bons: Pas d'anti-aliasing et de balisage insensé. Ce N'est pas L'endroit pour utiliser JavaScript.

Comme l'a dit Brajeshwar: utiliser le sélecteur border-radius css3. Maintenant, vous pouvez appliquer -moz-border-radius et -webkit-border-radius pour les navigateurs basés sur Mozilla et Webkit, respectivement.

Alors, que se passe-t-il avec Internet Explorer?. Microsoft a de nombreux comportements pour faire Internet Explorer ont des fonctionnalités supplémentaires et obtenir plus de compétences.

Ici: un fichier de comportement .htc pour obtenir round-corners à partir de la valeur border-radius dans votre CSS. Exemple.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Bien sûr, behavior selector n'est pas un sélecteur VALIDE, mais vous pouvez le mettre sur un fichier CSS différent avec des commentaires conditionnels (uniquement pour IE).

Le fichier HTC comportement

Avec le support de CSS3 mis en œuvre dans les nouvelles versions de Firefox, Safari et Chrome, il sera également utile de regarder "Border Radius".

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

Comme tout autre raccourci CSS, ce qui précède peut également être écrit au format élargi, et ainsi atteindre un rayon de bordure différent pour le topleft, topright, etc.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

JQuery est la façon dont je traiterais cela personnellement. le support css est minime, les images sont trop difficiles, pour pouvoir sélectionner les éléments que vous voulez avoir des coins ronds dans jQuery a un sens parfait pour moi, même si certains diront sans doute le contraire. Il y a un plugin que j'ai récemment utilisé pour un projet au travail ici: http://plugins.jquery.com/project/jquery-roundcorners-canvas

Il y a toujours la manière JavaScript (voir d'autres réponses) mais comme c'est purement styling, je suis un peu contre l'utilisation de scripts clients pour y parvenir.

La façon dont je préfère (bien qu'elle ait ses limites), est d'utiliser 4 images de coin arrondies que vous positionnerez dans les 4 coins de votre boîte en utilisant CSS:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

Comme mentionné, il a ses limites (l'arrière-plan derrière la boîte arrondie devrait être simple sinon les coins ne correspondront pas à l'arrière-plan), mais cela fonctionne très bien pour rien au monde.

Mise à Jour: Amélioration de l'implémentation en utilisant une feuille sprite.

Personnellement, j'aime cette solution le meilleur, c'est un .htc pour permettre à IE de rendre les bordures incurvées.

Http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Dans Safari, Chrome, Firefox > 2, IE > 8 et Konquerer (et probablement d'autres), vous pouvez le faire en CSS en utilisant la propriété border-radius. Comme cela ne fait pas encore officiellement partie de la spécification, veuillez utiliser un préfixe spécifique au fournisseur...

Exemple

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Les solutions JavaScript ajoutent généralement un tas de petits div S pour le rendre arrondi, ou elles utilisent des bordures et des marges négatives pour faire des coins entaillés 1px. Certains peuvent également utiliser SVG dans IE.

IMO, la manière CSS est meilleure, car elle est facile, et se dégradera gracieusement dans les navigateurs qui ne le supportent pas. Ceci est, bien sûr, seulement le cas où le client ne les applique pas dans les navigateurs non pris en charge tels que IE

Voici une solution HTML/js/css que j'ai fait récemment. Il y a une erreur d'arrondi 1px avec un positionnement absolu dans IE, donc vous voulez que le conteneur soit un nombre pair de pixels de large, mais c'est assez propre.

HTML:

<div class="s">Content</div>

JQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

Image est juste 18px large et a tous les 4 coins emballés ensemble. Ressemble à un cercle.

Note: vous n'avez pas besoin du deuxième wrapper interne, mais j'aime utiliser margin sur le wrapper interne afin que les marges sur les paragraphes et les titres maintiennent toujours l'effondrement de la marge. Vous pouvez également ignorer le jquery et simplement mettre le wrapper interne dans le html.

Comme indication de la complexité de fonctionnement des coins arrondis, même Yahoo les décourage (Voir premier point à puces)! Certes, ils ne parlent que de coins arrondis de 1 pixel dans cet article, mais il est intéressant de voir que même une entreprise avec leur expertise a conclu qu'ils étaient trop douloureux pour les faire fonctionner la plupart du temps.

Si votre design peut survivre sans eux, c'est la solution la plus simple.

Bien sûr, si c'est une largeur fixe, c'est super facile en utilisant CSS, et pas du tout offensant ou laborieux. C'est quand vous en avez besoin pour évoluer dans les deux sens que les choses deviennent agitées. Certaines des solutions ont une quantité stupéfiante de divs empilés les uns sur les autres pour y arriver.

Ma solution est de dicter au concepteur que s'il veut utiliser des coins arrondis (pour le moment), il doit s'agir d'une largeur fixe. Les concepteurs aiment les coins arrondis (moi aussi), donc je trouve que c'est un compromis raisonnable.

Ruzee Borders est la seule solution de coin arrondi anti-aliasé basée sur Javascript que j'ai trouvée qui fonctionne dans tous les principaux navigateurs (Firefox 2/3, Chrome, Safari 3, IE6 / 7 / 8), et aussi le seul qui fonctionne lorsque l'élément arrondi et l'élément parent contiennent une image d'arrière-plan. Il fait aussi des frontières, des ombres et des reflets.

Le plus récent RUZEE.ShadedBorder est une autre option, mais il manque de support pour obtenir des informations de style à partir de CSS.

Si vous allez avec la solution border-radius, il y a ce site génial pour générer le css qui le fera fonctionner pour safari / chrome / FF.

Quoi qu'il en soit, je pense que votre conception ne devrait pas dépendre du coin arrondi, et si vous regardez Twitter, ils disent juste F**** aux utilisateurs IE et opera. Les coins arrondis sont agréables à avoir, et je suis personnellement ok pour les utilisateurs cool qui n'utilisent pas IE :).

Maintenant, bien sûr, ce n'est pas l'avis des clients. Voici le lien : http://border-radius.com/

En plus des solutions HTC mentionnées ci-dessus, voici d'autres solutions et exemples pour atteindre coins arrondis dans IE.

Il N'y a pas de "meilleur" moyen; il y a des façons qui fonctionnent pour vous et des façons qui ne le font pas. cela dit, j'ai posté un article sur la création de CSS+Image basée, fluide Round corner technique ici:

Boîte avec des Coins ronds à L'aide de CSS et D'Images-Partie 2

Un aperçu de cette astuce est celle qui utilise des DIVs imbriqués et la répétition et le positionnement de l'image d'arrière-plan. Pour les mises en page de largeur fixe (hauteur extensible de largeur fixe), vous aurez besoin de trois DIVs et trois images. Pour un fluide largeur mise en page (extensible largeur et hauteur) vous aurez besoin de neuf DIVs et neuf images. Certains pourraient le considérer trop compliqué, mais à mon humble avis, c'est la solution la plus soignée de tous les temps. Pas de hacks, pas de JavaScript.

J'ai écrit un article de blog à ce sujet il y a quelque temps, donc pour plus d'informations, voir ici

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

Cela fonctionne assez bien. Pas besoin de Javascript, juste CSS et HTML. Avec un minimum de HTML interférant avec les autres choses. C'est très similaire à ce que Mono a posté, mais ne contient aucun Hack spécifique à IE 6, et après vérification, ne semble pas fonctionner du tout. En outre, une autre astuce consiste à rendre la partie intérieure de chaque image de coin transparente afin qu'elle ne bloque pas le texte qui est près du coin. Le la partie extérieure ne doit pas être transparente afin qu'elle puisse couvrir la bordure du div non arrondi.

Aussi, une fois que CSS3 est largement supporté avec border-radius, ce sera la meilleure façon officielle de faire des coins arrondis.

N'utilisez pas CSS, jQuery a été mentionné plusieurs fois. Si vous avez besoin d'un contrôle total de l'arrière-plan et de la bordure de vos éléments, essayez le PluginjQuery Background Canvas. Il place un élément de toile HTML5 en arrière - plan et permet à yo de dessiner chaque arrière-plan ou bordure que vous voulez. Coins arrondis, dégradés et ainsi de suite.

Opera ne supporte pas encore border-radius (apparemment il sera dans la version après la version 10). En attendant, vous pouvez utiliser CSS pour définir un arrière-plan SVG pour créer un effet similaire .