用DIV+CSS实现文字及面板阴影效果

效果如下:

ASP.NET 2.0服务器控件与组件开发高级编程

ASP.NET 2.0服务器控件与组件开发高级编程

 

实现代码:

< style  type ="text/css" >
#sfContainer1  {
    font :  bold 10pt simsun, tahoma ;
    background-color :  #808080 ;
    height :  30px ;
    line-height :  30px ;
    padding-left :  20px ;
}
#sfFrontText  {
    color :  #FFFFFF ;
    position :  absolute ;
    padding :  0px ;
    z-index :  1 ;
}
#sfBackText  {
    color :  #000000 ;
    position :  absolute ;
    padding :  2px 0px 0px 2px ;
    z-index :  0 ;
}
#sfRowSpacer1  {
    height :  20px ;
}
#sfContainer2  {
    height :  150px ;
    background-color :  #808080 ;
}
#sfFrontPanel  {
    border :  1px solid #C0C0C0 ;
    margin :  20px 0px 0px 20px ;
    background-color :  #FFFFFF ;
    width :  150px ;
    height :  60px ;
    position :  absolute ;
    z-index :  1 ;
}
#sfBackPanel  {
    border :  1px solid #666666 ;
    margin :  24px 0px 0px 24px ;
    background-color :  #000000 ;
    width :  150px ;
    height :  60px ;
    position :  absolute ;
    z-index :  0 ;
}
</ style >

< div  id ="sfContainer1" >
     < div  id ="sfFrontText" >
        ASP.NET 2.0服务器控件与组件开发高级编程 </ div >
     < div  id ="sfBackText" >
        ASP.NET 2.0服务器控件与组件开发高级编程 </ div >
</ div >
< div  id ="sfRowSpacer1" >
</ div >
< div  id ="sfContainer2" >
     < div  id ="sfFrontPanel" >
     </ div >
     < div  id ="sfBackPanel" >
     </ div >
</ div >