Webkit rayon de frontière parfois prennent effet

Question

Cette question est au sujet de la propriété border-radius CSS3 ( http: // www.css3.info/border-radius-apple-vs-mozilla/ )

Un exemple de ce problème est ici:

http://jamtodaycdn.appspot.com/bin/rounded.html

Dans cette URL, j'ai arrondi divs qui semblent être arrondies à FF3, mais sur Safari et Chrome les coins arrondis ne sont pas là.

Le style est le suivant:

-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;

Je suis assez sûr que ce CSS est correctement formaté, donc je suis désemparés quant à ce que le problème est.

Answer 1

Le problème semble être dans le radia de 92px. Il semble que le rayon maximal que le haut de 20 pixels div peut gérer est 18px. Il est évident pas nécessairement ce qu'est un rayon de 92 pixel signifie dans ce cas. Cependant, vous pouvez spécifier un X et le rayon Y en utilisant quelque chose comme ceci:

-webkit-border-bottom-right-radius: 92px 18px;

(note de côté, vous ne devriez pas utiliser le même ID pour plusieurs éléments HTML. Vous devez utiliser à la place de classe, et d'ajuster votre sélecteur CSS il dit .round au lieu de #round.)

Answer 2

Pour toute personne faisant référence à cette aide avec des coins arrondis, je suis d'accord avec la réponse de Jacob concernant Webkit, mais la question a également mentionné Chrome ne fonctionne pas. Chrome utilise des coins arrondis standards CSS3 qui sont exactement comme Webkit de, mais sans précédent « -webkit- » sur la règle. Ceux-ci sont les suivantes:

border-bottom-right-radius:2px;

Pour prendre en compte Firefox, Webkit et Chrome, vous aurez besoin de faire quelque chose comme ceci:

-moz-border-radius-topright:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;

Le troisième ensemble de règles sont les règles CSS3 et sont pris en charge par Chrome. Ceci est un bon moyen d'obtenir également des coins arrondis dans IE en utilisant quelque chose comme CSS3Pie: http://css3pie.com/

Answer 3

Vous ne devez appliquer une propriété de frontière ou de largeur frontière, ainsi que les différentes propriétés border-radius?

Safari, j'ai aussi remarqué que laisser tomber le rayon au-dessus de certaines valeurs de rayon -. Essayez de réduire les valeurs de pixel et voir ce qui se passe

Answer 4

type simple il suffit d'utiliser:

border-radius:92px 92px 2px 2px;

où:

border-radius:top right bottom left;