巧用CSS边框 制作技能冷却效果

在线演示所展示的效果确实令人眼前一亮。在网页设计中，我们不必局限于使用Flash，还有许多创意方法可以实现这种旋转效果。

这个效果的核心在于一个带有透明度的多边形图层覆盖在背景图片上。那么，如何构建这个多边形呢？

对于Internet Explorer，我们可以使用VML，而其他浏览器则可以选择Canvas等技术。虽然这些方法都可行，但寻求最简单的解决方案始终是我们的目标。深入分析后发现，该效果其实是由若干个三角形拼接而成。如果你对CSS2有所了解，应该会在某处遇到这些三角形。

想象一下一个100100尺寸的div，拥有四条彩色边框。初看之下，可能看不出什么特别之处。当我们把div的边框宽度设置为50px时，情况就不同了。你会发现边框与边框之间的交界处形成了斜线。如果我们进一步将div的长宽都设置为0，并通过调整每条边的边框宽度，就可以形成一个不规则的三角形。

更神奇的是，我们可以通过设置边框颜色为透明，来隐藏指定的边框。例如，我们可以创建一个div，只保留一个方向的边框颜色，而将其他方向的边框颜色设置为透明。这样就形成了一个带有单一颜色的三角形。值得注意的是，Internet Explorer 6不支持将边框颜色设置为透明，因此需要针对该浏览器使用特定的技巧，例如使用chroma滤镜过滤掉黑色。

那么，如何利用这种方法来构建多边形呢？其实只需创建若干个div，通过调整其边框来拼接成相应的形状。例如，如果我们想创建一个由四个三角形组成的多边形，我们只需要创建四个遮罩层，通过调整每个层的边框来实现。至于具体的代码实现，只需在纸上简单推算下就可以了。

通过巧妙利用CSS的边框特性，我们可以以简洁的方式实现复杂的网页效果。这种方法不仅具有创意，而且代码实现也相对简单，为网页设计师提供了更多的创意空间。

通过cambrian.render('body')这段代码，我们可以将这个设计完美地呈现在网页上，为用户带来独特的视觉体验。