DIV CSS 佈局教程網

先看CSS樣式：

.border{ background:#ffecf9; border:1px solid #ffd3ec; width:500px; position:relative; }

.lt{ background:url(../images/border_lt.gif) no-repeat; left:0; top:0; position:absolute; width:7px; height:7px;}
.rt{ background:url(../images/border_rt.gif) no-repeat; right:0; top:0; position:absolute; width:7px; height:7px;}
.lb{ background:url(../images/border_lb.gif) no-repeat; left:0; bottom:0; position:absolute; width:7px; height:7px;}
.rb{ background:url(../images/border_rb.gif) no-repeat; right:0; bottom:0; position:absolute; width:7px; height:7px;}

.content{}

代碼：

<div class="border">
<div class="lt-1"></div>
<div class="rt-1"></div>
<div class="lb-1"></div>
<div class="rb-1"></div>

<div class="content">This is content.</div>

</div>

樣式中的border_lt.gif等4個圖片就是div的4個圓角圖片，需要自己完整的切出來，大小視情況而定
位置通過left、top、right、bottom來絕對控制

說明：

1、相對定位的border層，寬度和高度至少定義一個，如果不定義的話，火狐是可以正常顯示，但是IE會有很多問題

2、.lb{ background:url(../images/border_lb.gif) no-repeat; left:0; bottom:0; position:absolute; width:7px; height:7px;}
這裡位置的定義，IE下可能存在些許差別，可針對IE特別設置，示例如下：

.lb{ background:url(../images/border_lb.gif) no-repeat; left:-1px!important; left:-5px; bottom:-1px!important; bottom:-5px; }

具體視情況而定