Parties de l'image de fond visible lors de l'utilisation du border-radius

En utilisant le code ci-dessous, les deux Chrome et Opera (dernières versions supportant border-radius) sur Mac montrent une petite zone bleue en dehors des coins arrondis (qui semble une partie du image de fond définie). Pourquoi?Parties de l'image de fond visible lors de l'utilisation du border-radius

<!doctype html> 
<head> 
    <title>Testcase for rounded corners on submit button with bg-image</title> 

    <style type="text/css"> 
     input[type="submit"] { background: url(http://skriblerier.net/div/rounded-corners-input/bg-bottom.png); color: #fff; height: 40px; width: 150px; border-radius: 10px; border: 1px solid #fff; font-size: 14px } 
    </style> 
</head> 
<body> 
    <form> 
     <div><input type="submit" /></div> 
    </form> 
</body>

Source

2010-03-06 EspenA

J'ai travaillé autour de ce avec un fond clip: http://www.css3.info/preview/background-origin-and-background-clip/

background-clip: padding-box; 
-moz-background-clip: padding; 
-webkit-background-clip: padding;

Source

2010-09-19 21:02:00 Zajec

a-ha! c'est "padding", sans le "-box". Merci! cela ne fait pas ressortir la différence: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed –

FF3.6 fait aussi bien, mais pas aussi sensiblement (avec rayon -moz-border, bien sûr). On dirait qu'ils essaient de lisser automatiquement les coins, et ne peuvent simplement pas masquer tout le fond quand il y a aussi une bordure appliquée. Supprimer la déclaration de bordure (pas le rayon de la bordure) va le réparer. Alors:

border-radius: 10px; border: 1px solid #fff; rendant: border-radius: 10px;

Je soupçonne, mais ne sais pas, que cela a à voir avec les difficultés de trucage des demi-pixels et les formes rondes de nidification dans plus d'un bitmap que vecteur « espace '.

Source

2010-03-06 22:34:40

J'ai essayé de supprimer la déclaration de bordure et d'ajouter -moz-border-radius ainsi, mais j'obtenir une bordure grise autour presque tout le bouton de soumission. S'il vous plaît voir: http://skriblerier.net/div/rounded-corners-input/without-border.html - arrive dans Chrome, Firefox et Opera. – EspenA

Ah, j'ai compris. J'ai besoin de réinitialiser la déclaration de la frontière, pas l'enlever entièrement :) Donc, fondamentalement: border-radius: 10px; bordure: 0; fait le tour. Merci! – EspenA

@EspenA Pas de problème. Pour couvrir vos bases, utilisez -webkit-, -moz-, * et * la version normale, sans préfixe, comme vous obtenez lorsque vous utilisez cet outil, par exemple: http://border-radius.com/ (-webkit- will obtenir des versions plus anciennes de Safari/Chrome). –

Parties de l'image de fond visible lors de l'utilisation du border-radius

Répondre

Questions connexes