12

我有以下 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 兼容性？

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

（我在这里只应用了某些边框样式。）Kip，你是对的，因为 UL 没有设置边框，所以没有设置边框半径，但我没有注意到边框实际上设置在LIs - 因此它是那些想要四舍五入的人。

于 2009-07-22T17:35:16.630 回答
2

或者您可以使用 and 应用边框半径并为它们提供相同的背景颜色

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 回答
1

您还可以overflow: hidden;向 ul 元素添加属性，因此子元素在 ul 之外将不可见

于 2014-04-25T10:11:10.120 回答