border-radius no se aplica al elemento ul?

Tengo el siguiente código CSS, pero los estilos -moz-border-radius y -webkit-border-radius no se están aplicando a UL. ¿Hay algo obvio que me falta por qué? O ¿el -border-radius no es compatible con los elementos UL?border-radius no se aplica al elemento 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; 
}

Además, debería también estar aplicando border-radius en el momento de la compatibilidad futura CSS3?

Fuente

2009-07-22 James Inman

Estaba viendo el problema 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; 
}

(sólo he aplicado ciertos estilos de la frontera aquí.) Kip, que eran correctas, ya que la UL tenía ninguna frontera establece que no había nada para establecer un radio de frontera, pero no me di cuenta de que el límite está realmente establecido en los LI, por lo tanto, son los que desean redondear.

Fuente

2009-07-22 17:35:16

entonces, ¿problema resuelto, o todavía hay una pregunta? si está resuelto y crees que mi respuesta fue la más útil, ¿podrías aceptarla? – Kip

es necesario especificar una propiedad de fronteras y/o un color de fondo, de lo contrario no verá la frontera redondeada:

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; 
}

Además, la frontera de radio no se hereda, así que si estás esperando que los li reales tengan el borde redondeado, tendrás que establecerlo allí.

Fuente

2009-07-22 16:55:16 Kip

o puede aplicar radio de la frontera con y y les da el mismo color de fondo

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; 
}

Fuente

2012-03-26 11:45:39

también puede agregar overflow: hidden; propiedad a su elemento ul, por lo que los elementos de niños no serán visibles fuera del ul

Fuente

2014-04-25 10:11:10

border-radius no se aplica al elemento ul?

Respuesta

Cuestiones relacionadas