DropShadow:让面板投射出阴影

DropShadow扩展器控件可以为页面中的某个面板投射出漂亮的阴影，起到突出显示以及美化页面的作用。
示例运行效果：

图(1)

图(2)

图(3)

DropShadowDemo.aspx代码示例：

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="DropShadowDemo.aspx.cs" Inherits="Chapter08_DropShadowDemo"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > DropShadow Demo </ title >
     < link  href ="styleSheet.css"  rel ="stylesheet"  type ="text/css"   />
     < style  type ="text/css" > ...
        #master_content .dropShadowPanel span {...}{color:white;text-decoration:underline;}
        #master_content .dropShadowPanel span:hover {...}{text-decoration:none;}

        .dropShadowPanel 
        {...}{    
            width:300px;    
            background-color:#5377A9;        
            color:white;
            font-weight:bold;        
        }
     </ style >
</ head >
< body >
     < form  id ="DropShadowForm"  runat ="server" >
         < asp:ScriptManager  ID ="sm"  runat ="server"   />
         < div  class ="demoheading" > 让面板投射出阴影 </ div >
         < asp:Panel  ID ="Panel1"  runat ="server"  CssClass ="dropShadowPanel" >
             < div  style ="padding:10px" >   
                First Name:  < asp:TextBox  ID ="TextBox1"  runat ="server" ></ asp:TextBox >< br  />
                Last Name:  < asp:TextBox  ID ="TextBox2"  runat ="server" ></ asp:TextBox >< br  />
                 < hr  />
           
                 < asp:Panel  ID ="CollapseHeader"  runat ="server"  style ="cursor: pointer;" >
                     < asp:Label  ID ="Label1"  runat ="server"  Text ="Label" > Show Details... </ asp:Label >
                 </ asp:Panel >
                 < asp:Panel  ID ="Panel2"  runat ="server"  style ="overflow:hidden;height:0" >  
                    Not many details here.  This is just a demo to show how the DropShadow will react
                    properly to changes in the size of the panel it is attached to.               
                 </ asp:Panel >
                 < ajaxToolkit:CollapsiblePanelExtender  ID ="cpe1"  runat ="Server"
                    TargetControlID ="Panel2"
                    Collapsed ="true"
                    CollapsedText ="Show Details..."
                    ExpandedText ="Hide Details..."
                    TextLabelID ="Label1"
                    ExpandControlID ="CollapseHeader"
                    CollapseControlID ="CollapseHeader"
                    SuppressPostBack ="true"   />
             </ div >
         </ asp:Panel >
        
         < ajaxToolkit:DropShadowExtender  ID ="dse"  runat ="server"
            BehaviorID ="DropShadowBehavior1"
            TargetControlID ="Panel1"
            Width ="5"
            Rounded ="true"
            Radius ="6"
            Opacity =".75"
            TrackPosition ="true"   />
         <!--
            TargetControlID：该扩展器目标控件ID，即将要实现阴影效果的控件的ID
            Opacity：阴影的不透明度，取值范围为0~1.0。该值越大，阴影则愈加不透明，即颜色愈深，反之亦然。
            Width：阴影与投射出阴影的元素之间的偏移量。
            Rounded：若该属性值设置为true，则将让目标控件比及阴影显示出圆角效果。
            Radius：圆角的半径，单位为像素(px)。
            TrackPosition：若目标控件将可能在页面中移动，或目标控件使用绝对定位指定位置，则该属性值应该设置为true，
                           让阴影跟踪目标控件的位置并自动随之移动。
         -->
            
          < div  style ="padding:15px;" >
             < label  for ="chkShadow" > Show Drop Shadow:  </ label >
             < input  type ="checkbox"  checked ="checked"  id ="chkShadow"
                onclick ="var b = $find('DropShadowBehavior1'); b.set_Width(chkShadow.checked ?  5 : 0);" />< br  />
             < label  for ="chkRounded" > Rounded:  </ label >
             < input  type ="checkbox"  id ="chkRounded"  checked ="checked"
                onclick ="var b = $find('DropShadowBehavior1'); b.set_Rounded(chkRounded.checked);" />
             < div >
                Radius:
                 < input  type ="radio"  id ="radius2"   name ="radiusValues"  value ="2"  
                    onclick ="$find('DropShadowBehavior1').set_Radius(this.value);"   />
                 < label  for ="radius2" > 2 </ label >
                 < input  type ="radio"  id ="radius4"   name ="radiusValues"  value ="4"
                    onclick ="$find('DropShadowBehavior1').set_Radius(this.value);"   />
                 < label  for ="radius4" > 4 </ label >
                 < input  type ="radio"  id ="radius6"   name ="radiusValues"  value ="6"
                    onclick ="$find('DropShadowBehavior1').set_Radius(this.value);"  checked ="checked"   />
                 < label  for ="radius6" > 6 </ label >
                 < input  type ="radio"  id ="radius10"  name ="radiusValues"  value ="10"
                    onclick ="$find('DropShadowBehavior1').set_Radius(this.value);" />
                 < label  for ="radius10" > 10 </ label >
             </ div >
             < div >
                Opacity:
                 < input  type ="radio"  id ="opacity25"   name ="opacityValues"  value =".25"
                    onclick ="$find('DropShadowBehavior1').set_Opacity(this.value);"   />
                 < label  for ="opacity25" > 25% </ label >
                 < input  type ="radio"  id ="opacity50"   name ="opacityValues"  value =".5"
                    onclick ="$find('DropShadowBehavior1').set_Opacity(this.value);"   />
                 < label  for ="opacity50" > 50% </ label >
                 < input  type ="radio"  id ="opacity75"   name ="opacityValues"  value =".75"
                    onclick ="$find('DropShadowBehavior1').set_Opacity(this.value);"  checked ="checked"   />
                 < label  for ="opacity75" > 75% </ label >
                 < input  type ="radio"  id ="opacity100"  name ="opacityValues"  value ="1.0"
                    onclick ="$find('DropShadowBehavior1').set_Opacity(this.value);" />
                 < label  for ="opacity100" > 100% </ label >
             </ div >
         </ div >
     </ form >
</ body >
</ html >