现在的位置: 首页 > 综合 > 正文

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

2013年03月02日 ⁄ 综合 ⁄ 共 1775字 ⁄ 字号 评论关闭

效果如下:

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>

 

抱歉!评论已关闭.