border-radius ne s'applique pas à l'élément ul?

J'ai le code CSS suivant, mais les styles -moz-border-radius et -webkit-border-radius ne sont pas appliqués à l'UL. Y a-t-il quelque chose d'évident qui me manque, ou est-ce que -border-radius ne supporte pas les éléments UL?border-radius ne s'applique pas à l'élément ul?

ul.navigation { 
    margin-top: 7px; 
    margin-bottom: 10px; 
    list-style-type: none; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
} 

ul.navigation li a { 
    text-transform: uppercase; 
    text-align: left; 
    font-size: 13px; 
    padding: 8px; 
    display: block; 
    border: 1px solid #375D81; 
    margin-top: -1px; 
    color: #183152; 
    background: #ABC8E2; 
    text-decoration: none; 
}

Aussi, dois-je appliquerai aussi border-radius au moment de la compatibilité future CSS3?

Source

2009-07-22 James Inman

Je regardais le problème mal.

ul.navigation { 
    margin-top: 7px; 
    margin-bottom: 10px; 
    list-style-type: none; 
} 

ul.navigation li a { 
    background: #ABC8E2;  
    text-transform: uppercase; 
    text-align: left; 
    font-size: 13px; 
    border: 1px solid #375D81; 
    margin-top: -1px; 
    padding: 8px; 
    display: block; 
    color: #183152; 
    text-decoration: none; 
} 

ul.navigation li:first-child a {  
    -moz-border-radius-topleft: 7px; 
    -moz-border-radius-topright: 7px; 
    -webkit-border-top-left-radius: 7px; 
    -webkit-border-top-right-radius: 7px; 
    border-top-right-radius: 7px; 
    border-top-left-radius: 7px; 
} 

ul.navigation li:last-child a { 
    -moz-border-radius-bottomleft: 7px; 
    -moz-border-radius-bottomright: 7px; 
    -webkit-border-bottom-left-radius: 7px; 
    -webkit-border-bottom-right-radius: 7px; 
    border-bottom-left-radius: 7px; 
    border-bottom-right-radius: 7px; 
}

(je n'ai appliqué certains styles de bordure ici.) Kip, vous étiez correct, puisque l'UL avait pas de frontière définie il n'y avait rien à définir un rayon de frontière, mais je ne l'ai pas remarqué que la bordure est en fait définie sur les LI - donc ce sont ceux qui veulent arrondir.

Source

2009-07-22 17:35:16

donc, problème résolu, ou y a-t-il encore une question? Si c'est résolu et que vous pensez que ma réponse est la plus utile, pourriez-vous l'accepter? – Kip

Vous devez spécifier une propriété de frontière et/ou une couleur d'arrière-plan, sinon vous ne verrez pas la frontière arrondie:

ul.navigation { 
    margin-top: 7px; 
    margin-bottom: 10px; 
    list-style-type: none; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 

    /* Added the following two properties to display border */ 
    border: 2px solid red; 
    background-color: green; 
}

De plus, le rayon de la bordure est héritée, donc si vous êtes En supposant que le li réel ait la bordure arrondie, vous devrez le mettre là.

Source

2009-07-22 16:55:16 Kip

Ou vous pouvez appliquer un rayon de frontière avec et et de leur donner la même couleur d'arrière-plan

ul.navigation, ul.navigation li {  
    background-color: #CCC; 
    -moz-border-radius-topleft: 7px; 
    -moz-border-radius-topright: 7px; 
    -webkit-border-top-left-radius: 7px; 
    -webkit-border-top-right-radius: 7px; 
    border-top-right-radius: 7px; 
    border-top-left-radius: 7px; 
}

Source

2012-03-26 11:45:39

vous pouvez également ajouter overflow: hidden; propriété à votre élément ul, de sorte que les éléments enfants ne seront pas visible à l'extérieur de ul

Source

2014-04-25 10:11:10

border-radius ne s'applique pas à l'élément ul?

Répondre

Questions connexes