纯CSS3透明水晶盒（4）

三、通透性

每个面的受光不同，所以透明度应该也有所区别，我把上，前，右对着浏览者的透明度调低于后面的，然后拉出半透明到透明的渐变叠加到基本的盒子颜色上，产生层次，我都是很淡的过渡色叠加，如果想剧烈的话也可以的，渐变写法如下：

background:-moz-linear-gradient(-45deg, rgba(255,255,255,0.3),rgba(255,255,255,0.2) 40％,rgba(255,255,255,0.2) 70％,rgba(255,255,255,0.1));

由左上到右下拉斜线渐变，从0％ 0.3到40％ 0.2，70％ 0.2到100％ 0.1；颜色很淡，如果把系数调大调深的话，渐变色就会很明显，由于里面各个面的渐变各不同，就不一一解释，相信看了源文件就会明白的了，我也是跟着自己感觉拉的渐变，没有很专业的光线投射研究，如果有错的地方你看出来了还望指出。

当调整出各个面的颜色之后，发现“前上右”面与面之间有边线分割，看起来很整齐，但是后面我原本没有画边线，结果‘左’跟‘后’有点混，所以还是12条边线一一画出，妥当些，前面的边线透明度为0.6，侧面的0.4，后面的0.2，突出层次。