border-radius không áp dụng cho phần tử ul?

Question

Tôi đã có mã CSS sau, nhưng các kiểu -moz-border-radius và -webkit-border-radius không được áp dụng cho UL. Có điều gì đó rõ ràng tôi đang thiếu là tại sao, hoặc không -border-radius không hỗ trợ các yếu tố 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; 
} 

Ngoài ra, nên tôi cũng được áp dụng border-radius tại thời điểm cho khả năng tương thích CSS3 trong tương lai?

Answer 1

Tôi đã xem xét vấn đề sai.

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

(Tôi chỉ áp dụng một số kiểu đường viền nhất định ở đây.) Kip, bạn đã chính xác, vì UL không có bộ biên giới không có gì để đặt bán kính đường viền, nhưng tôi không nhận thấy biên giới thực sự được thiết lập trên LIs - vì vậy đó là những người muốn làm tròn.

Answer 2

Bạn cần phải xác định một tài sản biên giới và/hoặc một màu nền, nếu không bạn sẽ không nhìn thấy biên giới tròn:

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

Ngoài ra, border-radius là không được thừa kế, vì vậy nếu bạn mong đợi của thực tế li để có biên giới tròn, bạn sẽ phải đặt nó ở đó.

Answer 3

Hoặc bạn có thể áp dụng bán kính biên giới với và và cung cấp cho họ các màu nền cùng

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

Answer 4

bạn cũng có thể thêm overflow: hidden; tài sản để yếu tố ul của bạn, vì vậy các yếu tố trẻ sẽ không được bên ngoài có thể nhìn thấy các ul