纯CSS制作Aero效果教程（一）

我要输了
——这是一个随机链接哦
——http://tieba.baidu.com/p/1075215018

今天先从任务栏开始
首先先建好html结构
<div class="taskbar">
　<div class="taskbar-item" focused="true">
　　<img src="imgs/default_icon.png" />
　</div>
　<div class="taskbar-item">
　　<img src="imgs/default_icon.png" />
　</div>
</div>
taskbar是任务栏的主体，
taskbar-item是任务栏中的按钮，
里面的img是按钮的图标。
（这么做完全是因为本人喜欢把img单独提出来>_<
那么下面开始写css
（下文中以//开头的均为注释，
　使用前请去掉，css不识别这样的注释，
　这么写纯粹为了方便= =）

首先把页面的样式先修改一下
*
{
　//将所有元素的外边距和内边距设为0
　//一种调整css的浏览器兼容的写法
　//不过好像不推荐这么写，也可以使用reset.css
　margin: 0;
　padding: 0;
}
html,body
{
　//隐藏掉页面的滚动条
　overflow: hidden;
}
body
{
　//设置内容不能被用户选取
　-webkit-user-select: none;
　-moz-user-select: none;
　-ms-user-select: none;
　-o-user-select: none;
　user-select: none;
　//统一设置字体为宋体 14px
　font: 14px "宋体";
}

好了接下来开始设计布局了
先设定一下按钮的尺寸，
最终决定按钮的宽度为48px，高度为36px，
并有1px的边框，
图片的宽高均为32px
.taskbar
{
　//设置定位为绝对定位并把位置固定在下面
　position: absolute;
　left: 0;
　bottom: 0;
　width: 100%;
　height: 38px;
　//设置任务栏的z-index为1000（设置的高点不会被其他物体覆盖
　z-index: 1000;
}
.taskbar-item
{
　float: left;
　width: 48px;
　height: 36px;
　border: 1px solid black;
}
.taskbar-item img
{
　//设置图片的尺寸并通过设置margin使图片居中
　width: 32px;
　height: 32px;
　margin: 2px 8px;
}
好了，结构差不多了，下一步该让界面更有aero风格了
先研究一下win7的aero风格，可以看出任务栏和窗口边框都是半透明的毛玻璃效果
（由于CSS3暂时无法实现毛玻璃效果，或者说作者不会，所以就无视了→ →
并且窗体的边框都是一层黑色的边框套着一层白色的
（后来又仔细看了看，qq什么的也是这样
研究完了，开工

预览一下，
好了效果差不多了
接下来把:hover，:active加一下，
代码很简单
.taskbar-item:hover
{
　background-color: rgba(255,255,255,0);
}
.taskbar-item:active
{
　background-color: rgba(255,255,255,0.3);
}
仅仅是改了一下按钮背景的透明度
如果想让效果更好也可以给.taskbar加上“transition: all 0.1s linear;”
顺便把选中的按钮的效果也加上
.taskbar-item[focused=true]
{
　background-color: rgba(255,255,255,0.7);
}
.taskbar-item[focused=true]:hover
{
　background-color: rgba(255,255,255,0.5);
}
依旧只是改了背景颜色的透明度
接下来你可以在其中一个.taskbar-item上加上focused="true"来测试了
（使用属性而不是class纯属个人习惯
点击一下，好像还差什么，win7中按钮按下后图片会向右下移动一点
也加上
.taskbar-item:active img
{
　//这里是用的transform做的，也可以修改margin，个人习惯++
　-webkit-transform: translateX(1px) translateY(1px);
　-moz-transform: translateX(1px) translateY(1px);
　-ms-transform: translateX(1px) translateY(1px);
　-o-transform: translateX(1px) translateY(1px);
　transform: translateX(1px) translateY(1px);
}

那么任务栏的制作就告一段落了
截至写本文之日，这个demo在opera最新版下仍有一个问题，
点击.taskbar-item下的img时不会对.taskbar-item应用:active伪类指定的样式
目前本人没有好的解决方案
测试页面：ht tp://sandbox.runjs.cn/show/omoa8fyc
下一篇教程无限跳票中……

按钮之前是不是看着太紧凑了？
加上点间距
.taskbar div
{
　margin-right: 2px;
}
漏了一楼

求挽尊 @马N甲N号 @gainover @次碳酸钴 @愚人陈 @ 各位大神

挽尊
说了初学者不适合看　还艾特我，　神马用心啊．．．
　　　　　　　　　　

插楼支持。

想问一下效果能不能达到像win8这样直角边框的Aero效果，重点是那边框的阴影，突出立体感，想学学，如果能给个div样式供web开发实在感激不尽！