首页 > 代码库 > 边框的巧妙应用
边框的巧妙应用
边框有一些特殊的属性，可以采用边框来实现对话框的效果，而且兼容性杠杠的，不过在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>效果：
边框的巧妙应用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。