div方框的四周的线每个角都少一点,那种效果怎么做啊?看下图
实现方法有很多 ?DIV+CSS 或直接用图片作角的背景
这有一个简单的CSS+DIV无图片圆角代码 :
<style>.flt5-a { height: 1px; margin: 0 5px; background: #333; }
.flt5-b { height: 1px; margin: 0 3px; border-left: 2px solid #333; border-right: 2px solid #333; }
.flt5-c { height: 1px; margin: 0 2px; border-left: 1px solid #333; border-right: 1px solid #333; }
.flt5-d { height: 2px; margin: 0 1px; border-left: 1px solid #333; border-right: 1px solid #333; }
/* for ie6 */
.flt5-a,
.flt5-b,
.flt5-c,
.flt5-d { overflow: hidden; }
.flt-m{border-left:1px solid #333; border-right:1px solid #333}
</style>
<div class="fillet-box">
<div class="flt5-a"></div>
<div class="flt5-b"></div>
<div class="flt5-c"></div>
<div class="flt5-d"></div>
<div class="flt-m">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;弧度为5的圆角演示
</div>
<div class="flt5-d"></div>
<div class="flt5-c"></div>
<div class="flt5-b"></div>
<div class="flt5-a"></div>
</div>
补充一个教程链接, 我这也是它那儿来的:
blogs.com/leejersey/archive/2011/11/16/2251614.html