12

次の CSS コードがありますが、-moz-border-radiusおよび-webkit-border-radiusスタイルが UL に適用されていません。理由について私が見逃している、または-border-radiusUL要素をサポートしていない明らかなものはありますか?

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 互換性についても現時点で申請する必要がありますか?

4

4 に答える 4

17

境界線のプロパティや背景色を指定する必要があります。指定しないと、丸みを帯びた境界線が表示されません。

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

また、border-radiusは継承されないため、実際のliの境界線が丸みを帯びていると予想される場合は、そこに設定する必要があります。

于 2009-07-22T16:55:16.837 に答える
3

私は問題を間違って見ていました。

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-したがって、丸めが必要なのはLIです。

于 2009-07-22T17:35:16.630 に答える
2

または、 と で境界線の半径を適用して、それらに同じ背景色を与えることができます

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-26T11:45:39.297 に答える