Home  >  Article  >  Web Front-end  >  Use DIV CSS to achieve text and panel shadow effects_html/css_WEB-ITnose

Use DIV CSS to achieve text and panel shadow effects_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:28:541171browse

 

实现代码:

< 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 ;
}


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

< div  id ="sfRowSpacer1" >

< div  id ="sfContainer2" >
     < div  id ="sfFrontPanel" >
    
     < div  id ="sfBackPanel" >
    

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn