圆角窗口大全 (无图片实现)

样式一

< html >
< head >
< title > 样式1-- http://www.livebaby.cn </ title >
< STYLE  type =text/css >
/*  Pillar type  */
.pillar  {
  background : transparent ;  
  width : 40% ;
   }
.pillar h1, .pillar p  {
  margin : 0 10px ;
   }
.pillar h1  {
  font-size : 2em ;  
  color : #fff ;
   }
.pillar p  {
  padding-bottom : 0.5em ;
   }
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4  {
  display : block ;  
  overflow : hidden ;
  font-size : 1px ;
   }
.pillar .b1, .pillar .b2, .pillar .b4  {
  height : 1px ;
   }
.pillar .b2, .pillar .b3  {
  background : #d66 ;  
  border-left : 1px solid #fff ;  
  border-right : 1px solid #fff ;
   }
.pillar .b4  {
  background : #d66 ;  
  border-left : 4px solid #fff ;  
  border-right : 4px solid #fff ;
   }
.pillar .b1  {
  margin : 0 2px ;  
  background : #fff ;
   }
.pillar .b2  {
  margin : 0 1px ;  
  border-width : 0 1px ;
   }
.pillar .b3  {
  height : 2px ;  
  margin : 0 ;
   }
.pillar .b4  {
  margin : 0 2px ;
   }
.pillar .boxcontent  {
  display : block ;  
  background : #d66 ;  
  border-left : 1px solid #fff ;  
  border-right : 1px solid #fff ;  
  margin : 0 5px ;
   }
</ STYLE >
</ head >
< body >< div  class ="pillar" >
< b  class ="b1" ></ b >< b  class ="b2" ></ b >< b  class ="b3" ></ b >< b  class ="b2" ></ b >< b  class ="b4" ></ b >
< div  class ="boxcontent" >
< h1 > 样式1 </ h1 >
</ div >
< b  class ="b4" ></ b >< b  class ="b2" ></ b >< b  class ="b3" ></ b >< b  class ="b2" ></ b >< b  class ="b1" ></ b >
</ div >
</ body >
</ html >

样式二

< html >
< head >
< title > 样式2-- http://www.livebaby.cn </ title >
< STYLE  type =text/css >
/*  flared serif  */
.serif  {
  background :  transparent ;  width : 40% ;
   }
.serif h1, .serif p  {
  margin : 0 10px ;
   }
.serif h1  {
  font-size : 2em ;  color : #fff ;
   }
.serif p  {
  padding-bottom : 0.5em ;
   }
.serif .b1, .serif .b2, .serif .b3, .serif .b4  {
  display : block ;  
  overflow : hidden ;
  font-size : 1px ;
   }
.serif .b1, .serif .b2, .serif .b3  {
  height : 1px ;
   }
.serif .b2, .serif .b3  {
  background : #fc0 ;  
  border-left : 1px solid #fff ;  
  border-right : 1px solid #fff ;
   }
.serif .b4  {
  background : #fc0 ;  
  border-left : 1px solid #fff ;  
  border-right : 1px solid #fff ;
   }
.serif .b1  {
  margin : 0 ;  background : #fff ;
   }
.serif .b2  {
  margin : 0 1px ;  
  border-width : 0 2px ;
   }
.serif .b3  {
  margin : 0 3px ;
   }
.serif .b4  {
  height : 2px ;  
  margin : 0 4px ;
   }
.serif .boxcontent  {
  display : block ;   
  background : #fc0 ;  
  border-left : 1px solid #fff ;  
  border-right : 1px solid #fff ;  
  margin : 0 5px ;
   }
</ STYLE >
</ head >
< body >< div  class ="serif" >
< b  class ="b1" ></ b >< b  class ="b2" ></ b >< b  class ="b3" ></ b >< b  class ="b4" ></ b >
< div  class ="boxcontent" >
< h1 > 样式2 </ h1 >
</ div >
< b  class ="b4" ></ b >< b  class ="b3" ></ b >< b  class ="b2" ></ b >< b  class ="b1" ></ b >
</ div >
</ body >
</ html >

样式三

< html >
< head >
< title > 样式3 -- http://www.livebaby.cn </ title >
< STYLE  type =text/css >
/*  Curved cutout Borders */
.curved  {
  background : transparent ;  
  width : 40% ;
   }
.curved h1, .curved p  {
  margin : 0 10px ;
   }
.curved h1  {
  font-size : 2em ;  
  color : #fff ;
   }
.curved p  {
  padding-bottom : 0.5em ;
   }
.curved .b1, .curved .b2, .curved .b3, .curved .b4  {
  display : block ;  
  overflow : hidden ;  
  height : 1px ;
  font-size : 1px ;
   }
.curved .b2, .curved .b3, .curved .b4  {
  background : #e0cea3 ;  
  border-left : 1px solid #fff ;  
  border-right : 1px solid #fff ;
   }
.curved .b1  {
  margin : 0 4px ;  
  background : #fff ;
   }
.curved .b2  {
  margin : 0 4px ;  
  height : 2px ;
   }
.curved .b3  {
  margin : 0 3px ;
   }
.curved .b4  {
  margin : 0 ;  
  height : 1px ;  
  border-width : 0 3px 0 3px ;
   }
.curved .boxcontent  {
  display : block ;  
  background : #e0cea3 ;  
  border : 0 solid #fff ;  
  border-width : 0 1px ;
   }
</ STYLE >
</ head >
< body >
< div  class ="curved" >
< b  class ="b1" ></ b >< b  class ="b2" ></ b >< b  class ="b3" ></ b >< b  class ="b4" ></ b >
< div  class ="boxcontent" >
< h1 > 样式3 </ h1 >
</ div >
< b  class ="b4" ></ b >< b  class ="b3" ></ b >< b  class ="b2" ></ b >< b  class ="b1" ></ b >
</ div >
</ body >
</ html >

样式四

< html >
< head >
< title > 简写CSS圆角 </ title >
< style  type ="text/css" >
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b { display : block ; overflow : hidden ; }
.b1,.b2,.b3,.b1b,.b2b,.b3b { height : 1px ; }
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b { border-left : 1px solid #999 ; border-right : 1px solid #999 ; }
.b1,.b1b { margin : 0 5px ; background : #999 ; }
.b2,.b2b { margin : 0 3px ; border-width : 2px ; }
.b3,.b3b { margin : 0 2px ; }
.b4,.b4b { height : 2px ; margin : 0 1px ; }
.d1 { background : #F7F8F9 ; }
</ style >
</ head >
< body >
< div >
< b  class ="b1" ></ b >< b  class ="b2 d1" ></ b >< b  class ="b3 d1" ></ b >< b  class ="b4 d1" ></ b >
< div  class ="b d1" >
< font  style ="font-size:26px;color:red; margin:0px 10px;" > 简写CSS圆角 </ font >
</ div >
< b  class ="b4b d1" ></ b >< b  class ="b3b d1" ></ b >< b  class ="b2b d1" ></ b >< b  class ="b1b" ></ b >
</ div >
</ body >
</ html >

样式五 哈哈3D的

< html >
< head >
< title > 3D圆角 -- http://www.livebaby.cn </ title >
< style  type =text/css >
.raised { background : transparent ; width : 40% ; }
.raised h1,.raised p { margin : 0 10px ; }
.raised h1 { font-size : 2em ; color : #fff ; }
.raised p { padding-bottom : 0.5em ; }
.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b { display : block ; overflow : hidden ; font-size : 1px ; }
.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b { height : 1px ; }
.raised .b2 { background : #ccc ; border-left : 1px solid #fff ; border-right : 1px solid #eee ; }
.raised .b3 { background : #ccc ; border-left : 1px solid #fff ; border-right : 1px solid #ddd ; }
.raised .b4 { background : #ccc ; border-left : 1px solid #fff ; border-right : 1px solid #aaa ; }
.raised .b4b { background : #ccc ; border-left : 1px solid #eee ; border-right : 1px solid #999 ; }
.raised .b3b { background : #ccc ; border-left : 1px solid #ddd ; border-right : 1px solid #999 ; }
.raised .b2b { background : #ccc ; border-left : 1px solid #aaa ; border-right : 1px solid #999 ; }
.raised .b1 { margin : 0 5px ; background : #fff ; }
.raised .b2, .raised .b2b { margin : 0 3px ; border-width : 0 2px ; }
.raised .b3, .raised .b3b { margin : 0 2px ; }
.raised .b4, .raised .b4b { height : 2px ;  margin : 0 1px ; }
.raised .b1b { margin : 0 5px ;  background : #999 ; }
.raised .boxcontent { display : block ; background : #ccc ; border-left : 1px solid #fff ; border-right : 1px solid #999 ; }
</ STYLE >
</ head >
< body >
< div  class ="raised" >
< b  class ="b1" ></ b >< b  class ="b2" ></ b >< b  class ="b3" ></ b >< b  class ="b4" ></ b >
< div  class ="boxcontent" >
< h1 > 3D圆角 </ h1 >
</ div >
< b  class ="b4b" ></ b >< b  class ="b3b" ></ b >< b  class ="b2b" ></ b >< b  class ="b1b" ></ b >
</ div >
</ body >
</ html >

样式六  纯HTML的

< html >
< head >
< title > html圆角 -- http://www.livebaby.cn </ title >
</ head >
< body >
< TABLE  cellSpacing =0  cellPadding =0  border =0 >
< TBODY >
< TR >
< TD  width =1 ></ TD >
< TD  width =1 ></ TD >
< TD  width =1 ></ TD >
< TD  width =274  bgColor =#999999 ></ TD >
< TD  width =1 ></ TD >
< TD  width =1 ></ TD >
< TD  width =1 ></ TD >
</ TR >
< TR >  
< TD ></ TD >
< TD  bgColor =#999999  colSpan =2 ></ TD >
< TD  bgColor =#f7f8f9 ></ TD >
< TD  bgColor =#999999  colSpan =2 ></ TD >
< TD ></ TD >
</ TR >
< TR >  
< TD ></ TD >
< TD  bgColor =#999999 ></ TD >
< TD  bgColor =#f7f8f9  colSpan =3 ></ TD >
< TD  bgColor =#999999 ></ TD >
< TD ></ TD >
</ TR >
< TR >
< TD  width =1  bgColor =#999999 ></ TD >
< TD  height =60  bgColor =#f7f8f9  colSpan =5 >< font  style ="font-size:26px;color:red; margin:0px 10px;" > html圆角 </ font ></ TD >
< TD  width =1  bgColor =#999999 ></ TD >
</ TR >
< TR >  
< TD ></ TD >
< TD  bgColor =#999999 ></ TD >
< TD  bgColor =#f7f8f9  colSpan =3 ></ TD >
< TD  bgColor =#999999 ></ TD >
< TD ></ TD >
</ TR >
< TR >  
< TD ></ TD >
< TD  bgColor =#999999  colSpan =2 ></ TD >
< TD  bgColor =#f7f8f9 ></ TD >
< TD  bgColor =#999999  colSpan =2 ></ TD >
< TD ></ TD >
</ TR >
< TR >  
< TD ></ TD >
< TD ></ TD >
< TD ></ TD >
< TD  bgColor =#999999 ></ TD >
< TD ></ TD >
< TD ></ TD >
< TD ></ TD >
</ TR >
</ TBODY >
</ TABLE ></ body >
</ html >