border-radius не применяется к элементу ul?

У меня есть следующий код CSS, но стили -moz-border-radius и -webkit-border-radius не применяются к UL. Есть ли что-то очевидное, я не знаю, почему, или -border-radius не поддерживает элементы UL?border-radius не применяется к элементу 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; 
}

Кроме того, я должен также применение border-radius в данный момент для будущей совместимости CSS3?

источник

2009-07-22 James Inman

Я искал проблему неправильно.

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

(я только применять определенные стили границ здесь.) Кип, вы были правы, так как UL было никакой границы не установлено не было ничего, чтобы установить границы радиуса, но я не заметил, что граница фактически установлена в LIs - таким образом, это те, которые хотят округления.

источник

2009-07-22 17:35:16

так, проблема решена, или есть еще вопрос? если он решен, и вы считаете, что мой ответ был наиболее полезным, вы могли бы принять его? – Kip

Вы должны указать свойство границы и/или цвет фона, в противном случае вы не будете видеть округлую границу:

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

Кроме того, граница радиуса не унаследовали, так что если вы ожидая, что фактические лики будут иметь закругленную границу, вам придется установить ее там.

источник

2009-07-22 16:55:16 Kip

Или вы можете применить радиус границы с и и дать им тот же цвет фона

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

источник

2012-03-26 11:45:39

вы можете также добавить overflow: hidden; свойство вашего уль элемента, поэтому дочерние элементы не будут видны за пределами ул

источник

2014-04-25 10:11:10

border-radius не применяется к элементу ul?

ответ

Смежные вопросы