CSS Border Radius和背景填充问题

时间:2011-12-22 04:48:22

标签: css css3

我有一个如下图所示的顶级菜单

enter image description here

如您所见,外部灰色边框带有边框半径。但是所选的主菜单将其填充为正方形。

我想要的是Home Selection菜单应该相应填充。

这是我的css代码

#navigation-wrap{width:100%; border-bottom: 1px solid #CCC;moz-box-shadow: 0px 5px 8px -2px #F5F5F5;-webkit-box-shadow: 0px 5px 8px -2px #F5F5F5;box-shadow: 0px 5px 8px -2px #F5F5F5;}
#navigation{margin:0 auto; border: 3px solid #CCC; border-bottom:none; position:absolute; right:0; top:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -moz-box-shadow:0px 0px 4px #EEE;   -webkit-box-shadow:0px 0px 4px #EEE;  box-shadow:0px 0px 4px #EEE;}
#navigation ul{list-style:none;}
#navigation li{float:left; display:block; letter-spacing:1px; border-bottom: 3px solid #CCC;}
#navigation a{float:left; display:block; height: 30px; line-height:30px; position:relative; padding:0 10px; text-decoration:none; border-bottom: none;}
#navigation a:hover {background: #000; text-shadow: 1px 1px 1px #FFF; color:#fff;}
.current-menu-item a{background: #000; text-shadow: 1px 1px 1px #FFF; color:#fff;}

谢谢。

2 个答案:

答案 0 :(得分:3)

将相同的border-radius属性添加到#navigation a

要将其应用于Home按钮,请使用#navigation a:first-child。如果您只希望元素的左侧有边框半径,请使用border-top-left-radiusborder-bottom-left-radius

答案 1 :(得分:0)

如果是wordpress生成的菜单,您可以通过使用firebug或其他检查元素来获取home的相应菜单ID。然后,您可以通过调用其各自的id

将css直接应用于单个菜单元素