Css rounded corner effect. IE6 and firefox are displayed normally.
The code is as follows: |
Copy code |
<Html> <Head> <Title> css rounded corner effect-Webpage Tutorial network </title> <Meta http-equiv = "content-type" content = "text/html; charset = gb2312"> <Style type = "text/css"> Div. RoundedCorner {background: # 9BD1FA} B. rtop, B. rbottom {display: block; background: # FFF} B. rtop B, B. rbottom B {display: block; height: 1px; overflow: hidden; background: # 9BD1FA} B. r1 {margin: 0 5px} B. r2 {margin: 0 3px} B. r3 {margin: 0 2px} B. rtop B. r4, B. rbottom B. r4 {margin: 0 1px; height: 2px} </Style> </Head> <Body> <Div class = "RoundedCorner"> <B class = "rtop"> <B class = "r1"> </B> <B class = "r2"> </B> <B class = "r3"> </B> <B class = "r4"> </B> <Br> corner box without images <br> <B class = "rbottom"> <B class = "r4"> </B> <B class = "r3"> </B> <B class = "r2"> </B> <B class = "r1"> </B> </Div> </Body> </Html> |
Save the above code as an html document and open it in a browser to see the effect.