今天小编跟大家讲解下有关巧用CSS边框 制作技能冷却效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关巧用CSS边框 制作技能冷却效果 的相关资料，希望小伙伴们看了有所帮助。
在线演示：http://demo.aidi.net.cn/js/2011/WarICONPrefect/index.htm上面的效果看起来还不错吧。在网页里 除了用Flash 我们还是有不少方法可以实现它。显然这种效果不复杂 一张背景图片 加上前面带有透明度的多边形图层 在脚本控制下就可以转起来了。但问题在于用什么方法来构建这个多边形
在IE下可以用VML 其他浏览器可以用Canvas等等。虽然行的通 但都不是最简单的。仔细分析下 该效果本质就是若干个三角形拼接而成。而三角形 如果你熟悉CSS2的话 一定在哪个地方见过。。。
首先来看一个100*100尺寸的div 他有4条彩色的边框：
当然 此时你看不出什么。现在我们把div的边框宽度设置成50px：
你发现什么了 边框与边框之间的交界处正好是条斜线。现在我们把div的长宽都设置成0 并且试着改变每条边的边框宽度：复制代码代码如下: <style> .demo3 { width: 0px; height: 0px; overflow: hidden; border-top: 20px red solid; border-right: 30px green solid; border-bottom: 40px blue solid; border-left: 50px #000 solid; } </style> <div class="demo3"></div> 我们对其上右下左分别设置了20 30 40 50px的边框宽度 这时就是呈现出一个不规则的三角形了。我们还可以通过设置边框颜色为transparent 让指定的边框隐藏掉（只指定一个方向上单独的边框是不会显示出来的 至少要指定两个相连的方向才能显示出来 所以要把不该出现的方向上的设置成透明）。例如： 复制代码代码如下: <style> .demo4 { width: 0px; height: 0px; overflow: hidden; border-left: 50px #000 solid; border-top: 20px red solid; border-right: 0px green solid; border-bottom: 0px blue solid;; } </style> <div class="demo4"></div> 但是我们只需其中一种颜色 所以要把另个边框的颜色设置成透明。值得注意的是 IE6下边框颜色不支持transparent值 始终显示为黑色 所以需要用个hack针对ie6 用chroma滤镜过滤掉黑色。（这一点感谢CSDN上的网友X!ao_f的支持！） <style> .BG5 { background: #CC9900; } .demo5 { width: 0px; height: 0px; overflow: hidden; filter: alpha(opacity=60); _filter: Chroma(color='black') alpha(opacity=60); opacity: 0.6; border-left: 50px #000 solid; border-top: 20px transparent solid; border-right: 0px green solid; border-bottom: 0px blue solid;; } </style> <div class="BG5"> <div class="demo5"></div> </div> 提示：您可以先修改部分代码再运行通过这个背景层 更好的看出其中一个边框设置成透明了。
如此一来 我们只需创建若干个div 通过设置其边框来拼接成相应的多边形。
事实上我们可以利用边框两边的三角形 这样只需创建4个遮罩层。至于代码如何写 拿张草稿纸出来 在上面推算下就可以了。
来源：爱蒂网
