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

2024-07-11 08:26:18

字体：大中小

来源：转载

供稿：网友

在线演示：http://demo.Vevb.com/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的支持！）

上一篇：关于table的width:100%和margin导致溢出

下一篇：css 解决浏览器兼容问题