CSS3设计动态立体盒子:CSS3透明水晶盒

如果你看了代码，没有头晕的话，会不会有这么一个疑惑，为什么不用border来写边框线?

如果用border来写的话，border的宽度会跟width重叠，导致盒子占据的空间为200+1+1=202px，很恶心的数字，而且border也不贴着边界，如图：

所以用这样一种做法来实现边框效果：box-shadow/text-shadow ；

一般我们是用border来给元素描边，前几天逛论坛的时候，看到这样一种做法：给文字描边。

一般思维会想到text-shadow这个属性，但是它是投影，跟描边还是有区别的，text-shadow写法如下：

text-shadow:2px 0px 0px #f00；

投影效果如图：

具体的投影资料可以参考我这篇文章：CSS3阴影；

上面是在没有羽化的情况下向右偏移，然而text-shadow可以多重投影，那么如果向上下左右四个方向同时投影，会怎么样呢?

text-shadow:2px 0px 0px #f00,0px -2px 0px #f00,-2px 0px 0px #f00,0px 2px 0px #f00;

投影效果如图：

就变成适应文字形状的描边效果了，当初因为border不能满足文字的描边需求，才想出这样的法子来实现描边，那现在反推，既然border不能用来描边了，那就用box-shadow投影描边的方法来实现边框。

做出来的效果如下：

我给底部写了个投影：

-webkit-box-shadow:-1px 1px 2px rgba(50,50,50,0.1);

少许的向前向右偏移，基本的造型效果就已经出来了，但是这样还不行，盒子的透明是透明了，但是感觉朦朦胧胧的，应该加强透明的处理，要不然体现不出通透性（可以跟第一个图对比下）。

三、通透性

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

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条边线一一画

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!