怎样把Responsive主题的菜单栏（menu）改成圆角？

很多用户想知道用什么方法能把Responsive模板的菜单栏改成圆角。实际上，做到这一点并不复杂，可以用“border-radius”轻松获得这一效果。该工具能很好的测试不同的px大小。

Menu原来的CSS代码是：

.menu {
background-color: #585858;
background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
background-image: -o-linear-gradient(top, #585858, #3d3d3d);
background-image: linear-gradient(top, #585858, #3d3d3d);
clear: both;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
margin: 0 auto;
}

要把菜单栏修改成圆角，需要将以下代码添加进CSS文件中：

.menu {
border-radius: 10px;
}

现在已经获得了圆角，但鼠标划过时，会发现第一个菜单栏项目的角仍然是方形。我们可以通过加入以下代码加以调整：

.menu > li:first-child:hover,
.menu > li:first-child:hover a {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}

取决于你的Menu设置情况，可能还需要为第一个菜单栏提供下面这段CSS代码：

.menu > li:first-child,
.menu > li:first-child > a {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}

现在观察一下，是不是做好了。这是将Responsive模板定制成圆角非常简单的一种方法。