Simulate shadow effect pure CSS rounded rectangle [original]

A pop-up menu is required for the project, and shadow + rounded corner is required .. Shadows cannot be in PNG format. Most customers use IE6, which is difficult to control with filters. Just create a CSS-only pixel rounded corner + shadow (simulation). Haha.

The idea is as follows:

 

 

CodeAs follows:

 CSS 

   . BBox  {  Width  :  300px  ;  }  
. BBox-t1,. bBox-t2,. bBox-b1,. bBox-b2 {  Height  :  1px  ;  Overflow  :  Hidden  ;  Margin  :  0px  ;  }  
BBox-t1  {  Border  : 0px  ;  Margin  :  0px 2px 0px 1px  ;  }  
BBox-t2  {  Border-Width  :  0px 1px  ;  Border-style  :  Solid  ; Margin-Right  :  1px  ;  }  
. BBox-offset  {  Margin  :  0px  ;  Border  :  0px  ;  }  
. BBox-body  { Border-Width  :  0px 1px  ;  Border-style  :  Solid  ;  Margin-Right  :  1px  ;  }  
BBox-b2  {  Background  : # 88cb8c  ;  Border-Width  :  0px 2px 0px 0px  ;  Border-style  :  Solid  ;  Margin-left  :  1px  ;  }  
BBox-b1  { Margin  :  0px 1px 0px 2px  ;  }  
. BBox-body *  {  Margin  :  0px  ;  }  
  /*  Border color  */  
. BBox-t1,. bBox-b2 {  Background  :  # 88cb8c  ;  }  
. BBox-t2,. bBox-body  {  Border-color  :  # 88cb8c  ;  }  
  /*  Background Color  */ 
. BBox-t2,. bBox-body  {  Background  :  # B8e0ba  ;  }  
  /*  Shadow color  */  
. BBox-offset,. bBox-b1  {  Background  :  #0d7813  ; }  
BBox-b2  {  Border-color  :  #0d7813  }  
  /*  ---------------------------------  */ 

 

 

 Html 

  <  Div  Class  = "BBox"  >  
  <  Div  Class  = "BBox-t1"  > </  Div  >  
  <  Div  Class = "BBox-t2"  > </  Div  >  
  <  Div  Class  = "BBox-offset"  >  
  <  Div  Class  = "BBox-body"  >  
 <  H1  >  Simulate shadow effect, pure CSS rounded rectangle  </  H1  >  
  <  Ul  >  
  <  Li  >  Easy to call  </  Li >  
  <  Li  >  Support for multiple browsers  </  Li  >  
  <  Li  >  Quickly change the border, background, and shadow color  </  Li  >  
 </  Ul  >  
  </  Div  >  
  </  Div  >  
  <  Div  Class  = "BBox-b2"  > </ Div  >  
  <  Div  Class  = "BBox-b1"  > </  Div  >  
  </  Div  > 

 

Effect:

Name it bBox ~ Support for IE, Firefox, chrome, and others. It is quite convenient to replace the color and call. Originally want to the background color, border color, shadow color written together, each time as long as change 3 places on the line, but the bBox-b2 is too depressed, don't decide, can only trouble point, change 6 places each time.