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

140
14

У меня есть следующий код CSS, но стили -moz-border-radius и -webkit-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?

спросил(а) 2021-01-25T19:01:13+03:00 5 месяцев назад
1
Решение
177

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


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

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

ответил(а) 2021-01-25T19:01:13+03:00 5 месяцев назад
89

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


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 не имел пограничного набора, не было ничего, чтобы установить граничный радиус, но я не заметил, что граница на самом деле установленный на LI - таким образом, те, которые хотят округлить.

ответил(а) 2021-01-25T19:01:13+03:00 5 месяцев назад
77

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


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

ответил(а) 2021-01-25T19:01:13+03:00 5 месяцев назад
63

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

ответил(а) 2021-01-25T19:01:13+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема