边框的巧妙应用 - 码农教程

边框有一些特殊的属性，可以采用边框来实现对话框的效果，而且兼容性杠杠的，不过在ie6下面可能会遇到兼容性问题，在后面分析它。

首先，我们看看边框的组成结构：

    <div style="width:20px;height:20px;border-width:10px; border-style: solid; border-color:#ff3300 #0000ff #339966 #00ff00;"></div>

效果图：

可以看到边框的效果，4个等腰梯形。我们设置的各个方向边框高度就是每个等腰梯形的高。

可以想象得到，如果div的高度和宽度都为0，那么这4个等腰梯形会变成等腰直角三角形；

如果分别设置每个方向边框高度，则变成一般三角形。

利用这个性质，我们可以再html上显示特殊字符▲▼△▽。

 .t-box{height:100px;line-height: 100px;background: #F3961C;position: relative;color: #000000; }
 .t-bd1{width:0;height:0;border-width:30px; border-style: solid; border-color:#F3961C transparent transparent ;_border-color:#F3961C #fff #fff;position: absolute;left:100px;top:100px; }

<div class="t-box">
        边框法生成技术
        <div class="t-bd1"></div>
</div>

　　效果：

前文提到了ie6的兼容性问题，我们在 .t-bd1中使用了ie6的属性值hack，将solid边框的背景色设置为环境色，否则在ie6下边框颜色设置为transparent的部分呈现黑色。

网络上有一篇文章提到在ie6下给需要透明色的边框设置border-style: dashed可以实现相同的目的，但是我的实验效果不是很理想。

实例二：

.t-bd2{width:0;height:0;border-width:20px; border-style: solid; border-color:#F3961C #F3961C transparent transparent ;position: absolute;left:100px;top:100px; }

<div class="t-box">
        边框法生成技术
        <div class="t-bd2"></div>
</div>

效果：

技巧在于border-color:#F3961C #F3961C transparent transparent ;

也可以利用该技巧实现复杂的呈现，主要是两个div之间的相互覆盖：

.t-bd3{width:0;height:0;border-width:15px 25px; border-style: solid; border-color:transparent #F3961C #F3961C transparent ;position: absolute;left:-50px;top:50px; }
.t-bd4{width:0;height:0;border-width:10px 25px; border-style: dashed solid solid dashed; border-color:transparent #fff #fff transparent ;position: absolute;left:-50px;top:60px; }

<div class="t-box" style="margin-left:100px;width:400px;">
        边框法生成技术
        <div class="t-bd3"></div>
        <div class="t-bd4"></div>
</div>

效果：

另一个实例：

.t-bd5{width:0;height:0;border-width:17px 10px; border-style: solid; border-color:#F3961C transparent transparent;position: absolute;left:50px;top:100px;z-index:1; }
.t-bd6{width:0;height:0;border-width:20px 15px; border-style: solid; border-color:#beceeb transparent transparent;position: absolute;left:45px;top:105px;z-index:0; }

<div class="t-box" style="border: 5px solid #beceeb;">
        边框法生成技术
        <div class="t-bd5"></div>
        <div class="t-bd6"></div>
</div>

效果：