前一阵在园子里看到一篇文章《基于css3仿造window7的开始菜单》，文中仅使用CSS3 实现了Windows 7 开始菜单的动态效果，很久以来一直被WPF/Silverlight 山上的风景所吸引，未成想其他的山也同样引人入胜。于是心血来潮也尝试着做了一个Windows 7 桌面效果，先来看几张截图吧。
桌面程序鼠标Hover 效果：
任务栏程序鼠标Hover 效果：
开始菜单效果：
桌面程序图标
桌面背景及程序图标的结构如下：
<div id=”win”>
<ul id=”app”>
<li> <a href=”#”>
<img src=”images/computer.png”>
Computer</a> </li>
<li> <a href=”#”>
<img src=”images/recycle.png”>
Recycle Bin</a> </li>
<li> <a href=”#”>
<img src=”images/network.png”>
Network</a> </li>
</ul>
</div>
在桌面<div>中加入背景图片：
#win
{
background-image: url(images/win7bg.jpg);
background-position: center;
width: 880px;
height: 550px;
border: #ffffff 1px solid;
} 为桌面应用图标添加鼠标Hover 动态效果，text-shadow 用来设置应用程序文字阴影效果，-webkit-border-radius 可设置边框圆角：
#app
{
float: left;
text-align: center;
margin: -15px 0 0 -30px;
list-style: none;
}
#app a
{
text-decoration: none;
border: solid 1px transparent;
display: block;
padding: 3px;
margin: 20px 0 0 0;
color: #ffffff;
text-shadow: 0.2em 0.1em 0.3em #000000;
}
#app a:hover
{
border: solid 1px #bbd6ec;
-webkit-border-radius: 3px;
box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
background-color: #5caae8;
}
任务栏程序图标 
下面是任务栏结构的HTML代码：
<div id=”taskbar”>
<a href=”#” id=”start”></a>
<a href=”#” style=”left: 60px”>
<img src=”images/ie.png” />
</a> <a href=”#” style=”left: 120px”>
