核心問題：
1.圓形怎樣實現？
css3的圓角屬性：border-radius:__ px; 把值設大點就圓啦。
2.怎樣實現動畫效果？
css3的transition屬性：transition:__ s;控制轉變過程的時間， 時間不要太短也不要太長。
3.動畫樣式？
動畫樣式有很多很多，基本上能更改的屬性樣式都能形成動畫。例項中：在圓角之前li標籤是個“方塊”，通過更改border的上下左右顏色實現動畫，看起來像外部的“環”在旋轉。
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
font:Arial 12px;
}
ul{
list-style-type:none;
}
li{
width:40px;
height:40px;
background:#ccc;
margin:10px;
float:left;
text-align: center;
line-height: 40px;
border:8px solid;
border-radius:40px;
border-color:#999 #555 #999 #555;
}
li:hover{
border-color:#555 #999 #555 #999;
}
li{
transition:1s;
}
a{
text-decoration:none;
}
</style>
<head>
<body>
<div>
<ul>
<li><a href='';>首頁</a></li>
<li><a href='';>博文</a></li>
<li><a href='';>關於</a></li>
</ul>
</div>
</body>
</html>效果圖：
滑鼠放在“首頁”上時：
以下是各瀏覽器對border-radius的支援明細：
