css| Round Corner HTML code <! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content=; charset=gb2312 "/><title> Untitled document </title><style type=" Text/css "><!--/* Start-first Example */ * Set millions of background images */.rbroundbox {background: #FF9900;}. Rbtop Div {background:url (/static/round/006//tl.gif) no-repeat topleft; rbtop {background:url (/static/round/006//tr.gif) no-repeat topright; Rbbot Div {background:url (/static/round/006//bl.gif) No-repeatbottom left; Rbbot {background:url (/static/round/006//br.gif) no-repeat bottomright;}/* Height and width stuff, width not really ne Ssisary. */.rbtop Div,. rbtop,. Rbbot Div,. rbbot {width:100%;height:15px;font-size:1px;}. rbcontent {margin:0 15px;}. Rbroundbox {width:50%; margin:1em auto;} /* End-first Example * *--></STYLE></HEAD><body><div class= "Rbroundbox" ><div class= "Rbtop" ><div></div></div><div class = "Rbcontent" > <p>corners</p><p>this is a sample</p><p>of a rounded box</p> <p>with funny corners</p> </div><!--/rbcontent--><div class= "Rbbot" ><div></ div></div></div><!--/rbroundbox--></body></ptml>
Css:
/* Start-first Example *//////Set millions of background images * *
. rbroundbox {Background:url (images/c00.gif) repeat;}
. rbtop Div {background:url (images/c11.gif) no-repeat top left;}
. rbtop {Background:url (images/c12.gif) no-repeat top right;}
. Rbbot Div {background:url (images/c21.gif) No-repeat bottom left;}
. Rbbot {Background:url (images/c22.gif) No-repeat bottom right;/* height and width stuff, width not really nessisary. */
. Rbtop Div,. rbtop,. Rbbot Div,. Rbbot {
width:100%;
height:7px;
font-size:1px;
}
. rbcontent {margin:0 7px;}
. rbroundbox {width:50%; margin:1em auto;}
/* End-first Example * *
Html:
<div class= "Rbroundbox" >
<div class= "Rbtop" ><div></div></div>
<div class= "Rbcontent" > <p>this is a sample</p>
<p>of a rounded box</p>
<p>with funny corners</p> </div><!--/rbcontent-->
<div class= "Rbbot" ><div></div></div>
</div><!--/rbroundbox-->
idea:First we have to do five pictures of four are rounded corners and a background picture, in HTML we defined a three-story Div, the first div inside set three Div, inside the first and third Div and apply a div, one and Sandu is used to define four pictures, and the middle Div is the content area. Rbtop defines a background image with the top left, and it also defines a background image on the top right. The third set of Div below is the same. So our rounded corners are done. By the way, forget that the outermost div is in the tiled background, and here's a blue color block.
Safe to run browsers:Win:ie5.5-6, opera6-7.2, Netscape6-7, Mozilla1-3. Mac:ie 5.2, Safari, Camino. 7 and OmniWeb 4.5.
