css comment obtenir des coins arrondis sur le bouton.

J'ai un bouton avec du CSS sur elle, et elle n'a pas de coins arrondis droit maintenant. J'ai les images gauche et droite (coins) comment puis-je appliquer du CSS ci-dessous? Merci pour toute aide.

.myButton
{
    background-image: url(../../Images/SubmitButtonBack.png);
    color: White;
    font-family: Verdana;
    font-weight: bold;
    font-size: 8pt;
    width: 160px;
    height: 22px;
    border: none;
    position: relative;
    cursor: pointer;
    margin-bottom:5px;
}

OriginalL'auteur user516883 | 2011-02-28

  1. 9

    CSS3 permet de le faire en spécifiant un border-radius au lieu

    http://www.css3.info/preview/rounded-border/

    OriginalL'auteur Arve

  2. 2

    Un css3 solution fonctionne dans tous les navigateurs IE et IE à partir de la version 9 (le mois prochain?).

    Si vous voulez augmenter la compatibilité avec IE8, vous pouvez utiliser :before et :after:

    .myButton:before {
  content: url(/path/to/left_image);
}
.myButton:after{
  content: url(/path/to/right_image);
}

    Si IE8 n'est pas assez bon, vous devez utiliser @Wolfy87 de réponse.

    OriginalL'auteur jeroen

  3. 1

    Méthodes mentionnées dans les autres réponses semblent concernent surtout les CSS3, ce qui n'est pas exactement de la croix-navigateur. Je pense que vous devriez essayer d'utiliser la portes coulissantes technique. Il est 100% croix-navigateur, et d'utiliser le coin des images que vous avez déjà.

    Par pas exactement de la croix-navigateur, je veux dire tout IE en dessous de la version 9 ne prend pas en charge.
    J'aimerais savoir pourquoi j'ai eu une downvote pour ce que je pensais était un bon suggestion.
    +1 je suis entièrement d'accord, bonne suggestion qui est compatible avec tous les navigateurs et n'a pas besoin de javascript. Et avec une hauteur fixe bouton facile à mettre en œuvre sans avoir besoin de codage html supplémentaire (si les boutons sont la partie d'une liste ou quelque chose de semblable qui est...).

    OriginalL'auteur Olical

  4. 1

    Utiliser jQuery dans les coins ronds plugin.

    http://jquery.malsup.com/corner/

    Il est pris en charge dans tous les navigateurs, y compris IE. PAS D'IMAGES NÉCESSAIRE. Il attire les coins dans IE à l'aide de divs imbriqués (pas d'images). Il a également natif border-rayon d'arrondi dans les navigateurs qui le supportent (Opera 10.5+, Firefox, Safari et Chrome). Ainsi dans les navigateurs le plugin définit simplement une propriété css à la place.

    Voici Comment l'utiliser

    Vous devez inclure le jQuery et le Coin js script avant </body>. Ensuite, écrivez votre jQuery comme <script>$('div, p').corner('10px');</script> et de la place avant ". Si votre code html ressemblera le code ci-dessous. Ici, je suis en train de faire les coins ronds pour tous div et p balises. Si vous voulez le faire pour l'id ou une classe puis vous pouvez faire quelque chose comme $('#myid').corner();

    <body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

    Vérifier exemple de travail à http://jsfiddle.net/VLPpk/1

    OriginalL'auteur Hussein

  5. 0

    Les autres l'ont dit d'utiliser border-radius qui est précis à 100%. Voici une petite démo.

    http://jsfiddle.net/TJcGc/

    OriginalL'auteur Dutchie432

  6. 0

    CSS3 vous donne la possibilité d'utiliser des coins arrondis avec border-radius, pendant les moments où il est bon d'utiliser le fournisseur de préfixes -webkit et -moz, quelque chose comme ce qui suit:

    -moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */

    Gardez à l'esprit que internet explorer ne gère pas cette propriété. Une solution est d'utiliser un script comme css3pie qui apporte des propriétés css3 pour internet explorer.

    Démo: http://jsfiddle.net/sUegC/1

    OriginalL'auteur Sotiris