纯CSS3透明水晶盒

<div class="box">
    <div class="inBox box_before",纯CSS3打造可折叠树状菜单;>前</div>
    <div class="inBox box_back">后</div>
    <div class=",精美的鲜艳色彩网站设计实例;inBox box_left">左</div>
    <div class="inBox box_right">右</div>
    <div class="inBox box_top">上</div>
    <div class="inBox box_bottom">下</div>
</div>
一个大盒子包住“前、后、左、右、上、下”6个面，因为定位发生层高的关联，所以它的次序实在是“后、下、左、前、上、右”，下面的div就会天然的叠在上面，就能够不写z-index了。

打过了趟深圳回来后，已经快半个月，在广州购书核心逛了下，发明2本前端书《重构HTML-改良WEB利用的设计》、《CSS3 实战》，看了一半《重构HTML》，发现看不下去，里面写的感到不是很受用，可能是当初程度有限，参透不了,简述CSS透明技巧(总结)，于是放下看《CSS3》。之前头脑里面的CSS3都是在网上看的。这次买了本书，脚踏实地的打个大框架出来，省得过段时光不必又乱了文理，基础把书过了一遍后，手也就痒痒的，想做个货色出来。

透明化了盒子，通透性强了，由于透明了，所以背部的三个面也就要做出来了，所以总共6个面，比原作多3个；
投影镜像，让盒子的立体感更强烈；
边角线的处置，让盒子面与面之间过渡协调
你可以点击这里下载 源代码（只是写了moz下的后果,简述CSS布局中的基础知识，webkit的就没写了）

信任大家有看过这个例子：3D盒子，应当他是最早这样写的吧，书上第282页有个综合实战“设计动态破体盒子”的例子，实现方法跟它一样，我的盒子也是以它为原型来设计的，不外在实现方面有做修正、优化，以及增加了一些细节，下面是我的盒子Firefox截图：

盒子的HTML构造很简略，如下：

 ,简述CSS Selector的优先级;