未应用css border-radius

时间:2012-07-31 11:14:26

标签: css css3

CSS边框半径未应用于导航包装器。有什么想法吗?

Fiddle

代码:

HTML:

<div class="navigation">
    <div><a href="">Home</a></div>
    <div><a href="">Products</a></div>
    <div><a href="">Services</a></div>
    <div><a href="">Support</a></div>
    <div><a href="">Contact</a></div>
</div>
<div style="clear:both;"></div>

CSS:

.navigation {   
    position:relative;
    float:left;

    overflow:auto;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.navigation div {
    position:relative;
    float:left;

    background: #484745;

    height:53px;
    line-height: 53px;
}

2 个答案:

答案 0 :(得分:3)

background-color提交给.navigation。写得像这样:

.navigation {    
    background: #484745;
}

请检查:jsFiddle

答案 1 :(得分:1)

问题在于你的背景。你的div的背景隐藏了.navigation的边界半径。只需将背景添加到.navigation(请参阅http://jsfiddle.net/nDEmS/18/