ASP.NET AJAX DropShadow 控件的一个BUG和解决方法(a bug of DropShadow and solution to resolve)

DropShadow 控件：http://www.asp.net/AJAX/AjaxControlToolkit/Samples/DropShadow/DropShadow.aspx

 

既方便又使用，给广大新手们带来了很大的便利，可以轻松的为Panel（DIV）等控件制作出圆角阴影效果，只需要如下代码就可以为Panel1添加美观的效果：

 

< asp:Panel  ID ="pnlMain_Images"  runat ="server"  Width ="885px"  Height ="300px"  BackColor ="#000066" >
</ asp:Panel >

< cc1:DropShadowExtender  ID ="dseCentral_Content"  runat ="server"  Rounded ="True"  TargetControlID ="pnlMain_Images"  Opacity =".1"  TrackPosition ="true" >
</ cc1:DropShadowExtender >

 

但今天发现了这个控件的一个BUG： 如果我们把一个应用了Shadow的Panel放到另一个应用了Shadow的Panel里，里面Panel的阴影就会有较大的偏移，非常影响美观,如下图所示：

 

代码：

 

         < asp:Panel  ID ="Panel1"   runat ="server"  Width ="885px"  Height ="300px"  BackColor ="#FFFFFF" >
             < asp:Panel  ID ="Panel2"   runat ="server"  Width ="585px"  Height ="200px"  BackColor ="#000055" >
             </ asp:Panel >
         </ asp:Panel >
         < cc1:DropShadowExtender  ID ="DropShadowExtender1"  runat ="server"  TargetControlID ="Panel1"
            Rounded ="True"  Opacity =".1"  TrackPosition ="False" >
         </ cc1:DropShadowExtender >
         < cc1:DropShadowExtender  ID ="DropShadowExtender2"  runat ="server"  TargetControlID ="Panel2"
            Rounded ="True"  Opacity =".5"  TrackPosition ="False" >
         </ cc1:DropShadowExtender >

 

截图：

 

解决方法：

 

这是由于相对位置偏移造成的，我们只用在内部的Panel上套一层绝对定位的DIV即可<div style="position:absolute">：

 

 

         < asp:Panel  ID ="Panel1"   runat ="server"  Width ="885px"  Height ="300px"  BackColor ="#FFFFFF" >
             < div  style ="position:absolute" >
             < asp:Panel  ID ="Panel2"   runat ="server"  Width ="585px"  Height ="200px"  BackColor ="#000055" >
             </ asp:Panel >
             </ div >
         </ asp:Panel >
         < cc1:DropShadowExtender  ID ="DropShadowExtender1"  runat ="server"  TargetControlID ="Panel1"
            Rounded ="True"  Opacity =".1"  TrackPosition ="False" >
         </ cc1:DropShadowExtender >
         < cc1:DropShadowExtender  ID ="DropShadowExtender2"  runat ="server"  TargetControlID ="Panel2"
            Rounded ="True"  Opacity =".5"  TrackPosition ="False" >
         </ cc1:DropShadowExtender >

 

下面是修正后的截图：

 

 

放在这里，希望被这个问题困扰的新手们能够找到这儿来。