边框有一些特殊的属性,可以采用边框来实现对话框的效果,而且兼容性杠杠的,不过在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>
效果:
时间: 2024-10-12 09:25:32