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">

                      弧度为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