Google实现的方式使用4张图片放在表格的4个角上.我也是采用了同样的方法,但是实现的方式不是用表格构造,而是用CSS控制DIV的样式来达到我们需要的效果.
<style type="text/css">
.divTL{
float:left;
width:4px;
height:4px;
margin-left:0px;
margin-top:0px;
}
.divTR{
float:right;
width:4px;
height:4px;
margin-right:0px;
margin-top:0px;
}
.divBL{
float:left;
width:4px;
height:4px;
margin-left:0px;
margin-bottom:0px;
}
.divBR{
float:right;
width:4px;
height:4px;
margin-left:0px;
margin-bottom:0px;
}
.divMain{
background-color:#C3D9FF;
width:100%;
height:15px;
}
.divTOP{
margin-top:0px;
width:100%;
height:4px;
}
.divBOTTOM{
margin-bottom:0px;
width:100%;
height:4px;
}
.divROOT{
width:95%;
background-color:#C3D9FF;
margin-left:auto;
margin-right:auto;
}
</style>
<div class="divROOT">
<div class="divTOP"><div class="divTR"><img src=https://mail.google.com/mail/images/corner_tr.gif class=c alt="" /></div><div class="divTL"><img src=https://mail.google.com/mail/images/corner_tl.gif class=c alt="" /></div></div>
<div class="divMain"> Hello World!</div>
<div class="divBOTTOM"><div class="divBR"><img src=https://mail.google.com/mail/images/corner_br.gif class=c alt="" /></div><div class="divBL"><img src=https://mail.google.com/mail/images/corner_bl.gif class=c alt="" /></div>
</div>
</div>
在IE和Firefox下面显示的效果是一样的.
<style type="text/css">
.divTL{
float:left;
width:4px;
height:4px;
margin-left:0px;
margin-top:0px;
}
.divTR{
float:right;
width:4px;
height:4px;
margin-right:0px;
margin-top:0px;
}
.divBL{
float:left;
width:4px;
height:4px;
margin-left:0px;
margin-bottom:0px;
}
.divBR{
float:right;
width:4px;
height:4px;
margin-left:0px;
margin-bottom:0px;
}
.divMain{
background-color:#C3D9FF;
width:100%;
height:15px;
}
.divTOP{
margin-top:0px;
width:100%;
height:4px;
}
.divBOTTOM{
margin-bottom:0px;
width:100%;
height:4px;
}
.divROOT{
width:95%;
background-color:#C3D9FF;
margin-left:auto;
margin-right:auto;
}
</style>
<div class="divROOT">
<div class="divTOP"><div class="divTR"><img src=https://mail.google.com/mail/images/corner_tr.gif class=c alt="" /></div><div class="divTL"><img src=https://mail.google.com/mail/images/corner_tl.gif class=c alt="" /></div></div>
<div class="divMain"> Hello World!</div>
<div class="divBOTTOM"><div class="divBR"><img src=https://mail.google.com/mail/images/corner_br.gif class=c alt="" /></div><div class="divBL"><img src=https://mail.google.com/mail/images/corner_bl.gif class=c alt="" /></div>
</div>
</div>
在IE和Firefox下面显示的效果是一样的.