边框的巧妙应用
边框有一些特殊的属性，可以采用边框来实现对话框的效果，而且兼容性杠杠的，不过在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>效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读