用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>