三、通透性

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

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，突出层次。

出处：蓝色理想
责任编辑：bluehearts

上一页 纯CSS3透明水晶盒 [3] 下一页 纯CSS3透明水晶盒 [5]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。