圆弧边框小技巧

    这是个老生常谈的小技巧, 圆弧的结构必须类似半径画弧的算法

例如第二个demo中的圆弧boder的宽度: 
第一行: 2px 第二行: 1px 第三行: 1px  第四行: 1px,第五行: 1px (但是高度为2)
然后margin的宽度递减,依据boder的宽度来计算,对于具体的某行margin=totalmargin-boder

Code
<style>
                div.div1{}{width:200px;}
                b.r1{}{display:block;height:1px;background-color:black;overflow:hidden;margin:0 3px;}
                b.r2{}{display:block;height:1px;background-color:green;overflow:hidden;margin:0 1px;border-left:solid black 2px;border-right:solid black 2px;}
                b.r3{}{display:block;height:1px;background-color:green;overflow:hidden;margin:0 1px;border-left:solid black 1px;border-right:solid black 1px;}
                
                div.div2{}{width:200px;}
                div.div2 b.rr1{}{display:block;height:1px;background-color:black;overflow:hidden;margin:0 6px;}
                div.div2 b.rr2{}{display:block;height:1px;background-color:green;overflow:hidden;margin:0 4px;border-left:solid black 2px;border-right:solid black 2px;}
                div.div2 b.rr3{}{display:block;height:1px;background-color:green;overflow:hidden;margin:0 3px;border-left:solid black 1px;border-right:solid black 1px;}
                div.div2 b.rr4{}{display:block;height:1px;background-color:green;overflow:hidden;margin:0 2px;border-left:solid black 1px;border-right:solid black 1px;}
                div.div2 b.rr5{}{display:block;height:2px;background-color:green;overflow:hidden;margin:0 1px;border-left:solid black 1px;border-right:solid black 1px;}
        </style>
        <div class=div1>
            <b class=r1></b><b class=r2></b><b class=r3></b>
                <div style="height:100px;border-left:solid black 1px;border-right:solid black 1px;">
                    <div style="height:30px;background-color:green">
                            this is the title
                    </div>
                        this is a test
                </div>    
                <b class=r3 style="background-color:white"></b><b class=r2 style="background-color:white"></b><b class=r1></b>
        </div>
            
            <br /><br /><br />

        <div class=div2>
            <b class=rr1></b><b class=rr2></b><b class=rr3></b><b class=rr4></b><b class=rr5></b>
                <div style="height:100px;border-left:solid black 1px;border-right:solid black 1px;">
                    <div style="height:30px;background-color:green">
                            this is the title
                    </div>
                        this is a test
                </div>                
            <b class=r3 style="background-color:white"></b><b class=r2 style="background-color:white"></b><b class=r1></b>
        </div>

实际使用中,设置class定义在css文件中.
 

this is the title

this is a test

this is the title

this is a test