<html>
<head>
<style>
#a{
border-left:1px #333 solid;
border-right:1px #333 solid;
width:300px;
height:500px;
}
.b{
height:1px;
overflow:hidden; /* 兼容IE,因為IE指定任何元素最小高度都為19px，不可更改。*/
border-left:1px #333 solid;
border-right:1px #333 solid;
}
</style>
</head>
<body>
<div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div id="a">
代碼很簡單，a層為內容層，其width值300，然后用b層向外以左右邊框2像素（可任意）的寬度遞減。最外一層要加上background屬性，目的是要將上、下兩線條呈現出來；b層的數量決定了要實現的圓角弧度大小。在firefox IE6 都通過測試。
</div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
</div>
</body>
</html>
posted on 2009-10-15 10:51
紫蝶∏飛揚↗ 閱讀(467)
評論(0) 編輯 收藏 所屬分類:
CSS 、
div+css+js代碼