未应用css border-radius

问题描述：

CSS边框半径未应用于导航包装。任何想法为什么？未应用css border-radius

代码：

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

在您测试什么浏览器？ – 2012-07-31 11:18:36

是的，它被应用 - 你只是没有看到它，因为具有圆角的元素没有边界和背景。检查你真的想要哪个元素具有圆角。 – feeela 2012-07-31 11:20:49

答

给background-color.navigation。像这样写：

.navigation {  
    background: #484745; 
}

检查：jsFiddle

Ahhhh谢谢，我没有意识到边界实际上应用于元素本身，而不是其子元素。 – 2012-07-31 11:22:01

答

问题是你的背景。您的div的背景隐藏了边框半径.navigation。只需将背景添加到.navigation（请参阅http://jsfiddle.net/nDEmS/18/）

未应用css border-radius

相关推荐