CSS实现菜单圆角背景

今天遇到要做CSS实现菜单圆角背景的效果, 所以在网上搜了一下，发现此方法最简单可行~~特记录下来供大家一起使用~~~

 

 

.nav ul li a{float:left; display:block; padding: 0 10px; } /*注意padding*/
.nav ul li a:hover{padding:0 0 0 10px; display:block; background:url(images/tableft1.jpg) left top no-repeat #990000; color:#fff;  }
.nav ul li a:hover span{padding:0 10px 0 0 ; display:block; background:url(images/tabright1.jpg) right top no-repeat #990000; color:#fff; }

 

<ul><li><a href="#"><span>Home</span></a></li></ul>

 

 

tableft1.jpg   和  tabright1.jpg