Today I saw the DIV + CSS implementation method of the Think rounded rectangle. He roughly did this.
Accumulate or subtract from the margin 1.1 points of the margin. Relatively good results! I studied it ~
HTML part
<! -- Round main --> <Div id = "round"> <! -- R_top ---> <Div class = "r_top"> <em class = "r_a"> </em> <em class = "r_ B"> </em> <em class = "r_C"> </em> <em class = "r_d"> </em> </div> <! -- // R_top end ---> <! -- R_box ---> <Div class = "r_box"> This is a rounded rectangle! <Br/> This is a rounded rectangle! <Br/> This is a rounded rectangle! <Br/> This is a rounded rectangle! <Br/> This is a rounded rectangle! <Br/> This is a rounded rectangle! <Br/> </div> <! -- // R_box end ---> <! -- R_bottom ---> <Div class = "r_bottom"> <em class = "r_d"> </em> <em class = "r_C"> </em> <em class = "r_ B"> </em> <em class = "r_a"> </em> </div> <! -- // R_bottom end ---> </div> <! -- // Round main end -->
CSS part
Div, EM {margin: 0; padding: 0 ;}# round {width: 500px; margin: 0px 20px ;}. r_top ,. r_bottom {display: block; font-size: 1px ;}. r_a ,. r_ B ,. r_C ,. r_d {display: block; overflow: hidden ;}. r_a ,. r_ B ,. r_C {Height: 1px ;}. r_ B ,. r_C ,. r_d {Background: # ccff66 ;}. r_box {Background: # ccff66; padding-left: 10px; padding-Right: 10px ;}. r_a {margin: 0 5px ;}. r_ B {margin: 0 3px; border-width: 0 2px ;}. r_C {margin: 0 2px ;}. r_d {Height: 2px; margin: 0 1px ;}
Test the compatibility. Currently, you can. No major problems have been found ~~.
For better understanding, use the simpleCodeFor example. XHTML code: <B class = "TOP"> <B class = "B1"> </B> <B class = "B2"> </B> <B class = "B3"> </B> <B class = "B4"> </B> CSS code: B {display: block ;}. b1 ,. b2 ,. b3 ,. b4 {overflow: hidden; Height: 1px; border-left: 1px solid #000; border-Right: 1px solid #000 ;}. b1 {margin: 0 5px; Background: #000 ;}. b2 {margin: 0 3px; border-width: 0 2px ;}. b3 {margin: 0 2px ;}. b4 {Height: 2px; margin: 0 1px ;}