border-radius nicht die Anwendung der ul-element?

Habe ich den folgenden CSS-code, aber der -moz-border-radius und -webkit-border-radius Stile werden nicht angewendet, um die UL. Gibt es etwas offensichtlich ich ' m fehlen, wie, warum, oder hat -border-radius keine Unterstützung für UL-Elemente?

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

Ebenfalls, sollte ich auch anwenden border-radius im moment für zukünftige CSS3-Kompatibilität?

InformationsquelleAutor James Inman | 2009-07-22
  1. 15

    Müssen Sie angeben, eine border-Eigenschaft und/oder eine Hintergrundfarbe, sonst werden Sie nicht sehen, die abgerundeten Rahmen:

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

    Auch, den border-radius wird nicht vererbt, so dass, wenn Sie erwarten, dass die tatsächliche li ist der abgerundete Rand, müssen Sie es dort.

    InformationsquelleAutor Kip
  2. 3

    Ich war auf der Suche auf das problem falsch.

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

    (Ich habe nur angewendet bestimmte Grenze Stile hier.) Pennen, Sie waren korrekt, da die UL hatte keine Grenze gesetzt, es war nichts ein border-radius auf, aber ich habe nicht bemerkt, dass die Grenze tatsächlich auf der LIs - so ist es jene, die Rundung.

    • so, problem gelöst, oder gibt es noch eine Frage? wenn es gelöst ist, und Sie denken, meine Antwort war die hilfreichste, könnte Sie Sie akzeptieren?
    InformationsquelleAutor James Inman
  3. 2

    Oder Sie anwenden können, border radius mit und und geben Sie Ihnen die gleiche Hintergrundfarbe

    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;
}
    InformationsquelleAutor Mario Radomanana
  4. 1

    können Sie auch hinzufügen overflow: hidden; Eigenschaft das ul-element, so dass die Kinder Elemente nicht sichtbar außerhalb des ul -

    InformationsquelleAutor Petryk P'yatochkin
Schreibe einen Kommentar