CSSASSCSSASS

美工们在设计漂亮的页面时，常常会采用一种阴影边框的效果。如图：

一般做法我们会将阴影框上下多扩展一些长度再切出来，使用right,bottom的背景定位（background-position）。

但是使用这样子的背景图在扩展上难免有些不足，定位上，也比较麻烦，并且为了这么一点点的效果，需要使用这么大的一张背景图，难免有些违逆我们偏嗜精简的心。

另外还有一种洋葱皮阴影做法，这种做法应该是切三张图。相对前面的做法就是不用切一张很大的图，且扩展性很好。但牺牲的是需要多添加二个层来放置背景。这种方法我是敬而远之的。

推翻了前面的几种做法，就此隆重推荐我们这种position定位法。
首先我们需要的多包容一个层（怎么这时候又不违逆你的心了。。。不好意思，虽然要多一个层，但我还是认为这么做精简，起码省却了美工们去切图了）

我稍微解释一下做法：

移动等大的包含关系的两层中的上一层偏离一些位置。（当然你也可以移动下层，甚至不用position改用margin负值也可以，只不过你都要多费些周折了）
这样下层的背景就成了上层的阴影了。

再说明下这个方法的不足：
除了前面提的要多需要一个层，就是不能模拟出超真实的阴影效果。

然后，或许大家对 top:-4px; right:2px;这个有些疑惑。
因为我们给front加了1px的border，加了这后，width和height都增加了2px.而top是相对顶部进行位移的，所以上下两个border都需要考虑进去，即2px+2px。而right是相对front的最右侧位置的，所以只需要2px.这样右侧和下侧都有2px宽的阴影了。

好了，边框阴影的效果就这样了。可能你也一直在用这种方法吧。那么，把这种方法用在文字上，你有没有试过呢。

请看，不用滤镜，不用图片，我们来看下立体字效果如何用纯CSS实现：

改变top,left值就可以模拟任意方向的投影。

——————————

要是以上的效果做法还有一些参考价值的话。
那么下面的效果，怎么说呢，仅供娱乐吧（好像盗用了某个人的词了）

—————————–

下面是什么效果呢，标题说了:彩虹字和倒影字。
不过在这之前，先再看一个效果：阴阳字（很囧啊…）

这个效果也是使用position定位来的。

不过这里关键的position有两个（前面的效果其实只有一个是关键的）
先是color层，absolute之后使用top向上移动8pt;在包含它的wrap中，使用overflow:hidden;将color中的文字”斩头”。
斩头之后，再将wrap绝对定位且下移8pt，刚好和下面back的文字重合。
这样，设置两段文字为不同颜色，就出现了我们”阴阳字”的效果。

如果这个效果的做法你理解了，就不难理解下面彩虹字和倒影字的做法了。
（只是大家看了后，一定要忍住，千万不要死命地扔板砖，砸到我不要紧，砸到花花草草就不好了:D ）。

:p 无敌7层position绝对定位2pt高度超级无缝衔接疯狂彩虹字特效：

还有我们的
:p 重型7级absolute单层1像素真实web2.0渐变风格倒影字效果（如果再加上透明滤镜更厉害）

标签： CSS2, 倒影字, 彩虹字, 文字特效, 阴影字

这篇文章发布于 2008年11月20号，星期四，21:53，归类于 CSS2。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。