怎樣把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模板定制成圓角非常簡單的一種方法。