自适应大小的CSS圆角盒子

以下是box.htm

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   xml:lang ="zh-CN"  lang ="zh-CN" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 自适应大小的CSS圆角盒子 </ title >
< style  type ="text/css" >
body  {
  font-size :  9pt ;
  line-height :  150% ;
}

#box1  {
  width :  200px ;   /*  此处定义box1宽度  */
  margin :  5px ;
}

#box2  {
  width :  390px ;   /*  此处定义box2宽度  */
  margin :  5px ;
}

#box3  {
  width :  600px ;   /*  此处定义box3宽度  */
  margin :  5px ;
}

.container  {
  float :  left ;
  color :  #666 ;
  background :  url(rounded-right.gif) top right no-repeat ;
}

.desc  {
  margin :  0 ;
  padding :  9px 9px 0 9px ;
  background :  url(rounded-left.gif) top left no-repeat ;
  font-weight :  bold ;
}

.link  {
  margin :  0 ;
  padding :  0 0 0 9px ;
  background :  url(rounded-left.gif) bottom left no-repeat ;
}

.link em  {
  height :  100px ;   /*  此处定义box高度  */
  display :  block ;
  padding :  0 9px 9px 0 ;
  font-style :  normal ;
  background :  url(rounded-right.gif) bottom right no-repeat ;
}
</ style >
</ head >
< body >

< div  id ="box1"  class ="container" >
   < p  class ="desc" > 自适应大小的CSS圆角盒子 </ p >
   < p  class ="link" >< em > 这是200×100px时的效果。 < br  /> 宽度需定义box，高度需定义link em。 < br  /> 宽度高度均不定义则为自适应。 </ em ></ p >
</ div >

< div  id ="box2"  class ="container" >
   < p  class ="desc" > 自适应大小的CSS圆角盒子 </ p >
   < p  class ="link" >< em > 这是390×100px时的效果。 < br  /> 宽度需定义box，高度需定义link em。 < br  /> 宽度高度均不定义则为自适应。 </ em ></ p >
</ div >

< div  id ="box3"  class ="container" >
   < p  class ="desc" > 自适应大小的CSS圆角盒子 </ p >
   < p  class ="link" >< em > 这是400×100px时的效果。 < br  /> 宽度需定义box，高度需定义link em。 < br  /> 宽度高度均不定义则为自适应。 </ em ></ p >
</ div >

</ body >
</ html >

 

以下是两个用到的背景图片，为了避免重复，因此图片做的越大越好。

rounded-left.gif

 

rounded-right.gif