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

      显然这种效果不复杂，一张背景图片，加上前面带有透明度的多边形图层，在脚本控制下就可以转起来了。但问题在于用什么方法来构建这个多边形？

      在IE下可以用VML，其他浏览器可以用Canvas等等。虽然行的通，但都不是最简单的。仔细分析下，该效果本质就是若干个三角形拼接而成。而三角形，如果你熟悉CSS2的话，一定在哪个地方见过。。。

      首先来看一个100*100尺寸的div，他有4条彩色的边框：

      当然，此时你看不出什么。现在我们把div的边框宽度设置成50px：

      你发现什么了？边框与边框之间的交界处正好是条斜线。现在我们把div的长宽都设置成0，并且试着改变每条边的边框宽度：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表