div.Edit   {} {
    color: #333333;
    border-bottom: 1px solid #AAAAAA;
    margin-bottom: 8px;
    padding: 4px 12px;
    background: #f5f5f5;
}

当然你也可以设置一些其他属性如border-top[上边框], border-left [左边框], border-right[右边框]等。
8. DisplayHeader属性
    该属性为bool型，用于设置是否显示Header栏
9. HeaderCssClass属性
    该属性为string型，用于设置Header的样式。.Text中，HeaderCssClass="CollapsibleTitle"，设置如下：

div.CollapsibleTitle  {} {
    font-size: 105%;
    background: #E5E5E5;
    border-top: 1px solid #AAAAAA;
    border-bottom: 1px dashed #AAAAAA;
    font-weight: bold;
    color: #333333;
    width: auto;
    padding: 2px 12px;
    margin: 12px 0px 0px 0px;
    clear: left;
}

其中我们可以看到border-top: solid，即上边框为实线，border-bottom: dashed，即下边框为虚线。

控件技术分析
1. Panel原理
    Panel本身其实就是一个div层，不管是VS自带的WebPanel还是Advanced Panel都是如此。
2. 折叠效果实现
    折叠按钮是一个关键，在最后生成的html代码中我们可以看到这样的代码：

< a  id ="Edit_Link"  onclick ="ToggleVisible('Edit_Contents','Edit_LinkImage','image/toggle_gray_up.gif','image/toggle_gray_down.gif'); return false;"  href ="#" >
< img  id ="Edit_LinkImage"  src ="image/toggle_gray_down.gif"  alt =""  border ="0"   />
a>

    超链接标签中onclick被重载，一旦按钮按下，调用ToggleVisible()函数。 让我们来看看ToggleVisible函数的实现：

function  ToggleVisible(targetID, imageID, linkImage, linkImageCollapsed)
{
     if  (document.getElementById){
          target  =  document.getElementById(targetID);
           if  (target.style.display  ==   " none " ) {
              target.style.display  =   "" ;
          }  else  {
              target.style.display  =   " none " ;
          }
          
           if  (linkImageCollapsed  !=   "" ) {
              image  =  document.getElementById(imageID);
               if  (target.style.display  ==   " none " ) {
                  image.src  =  linkImageCollapsed;
              }  else  {
                  image.src  =  linkImage;
              }
          }
      }
}

其中，参数targetID指定内容显示区的id，即div层的id，.Text中为Edit_Contents。参数imageID指定显示出来的折叠按钮的图片id。
该函数通过javascript中的getElementById获得特定html元素的指针，从而控制相应的html元素。至于显示和隐藏内容是通过修改html元素的style.display属性实现的，当style.display="none"时，则不显示，如果style.display=""，则显示。

其实，在本控件中，ToggleVisible是动态装载的，该函数放在uicontrols.js文件中，通过重载Panel控件的OnPreRender事件可以完成javascript的动态加载，具体方法可以见《ASP.NET服务器控件与组件开发》。装载代码如下：

protected   override   void  OnPreRender(EventArgs e)
{    
    if (Collapsible){
                Page.RegisterClientScriptBlock(CLIENT_SCRIPT_KEY, 
                    Utilities.GetClientScriptInclude(CLIENT_SCRIPT_FILE));
            }
    base.OnPreRender(e);
}

其中，CLIENT_SCRIPT_KEY和CLIENT_SCRIPT_FILE为控件内部定义的常量。
3. Collapsed属性的实现
    Collapsed属性如果为true，则一开始就不显示内容区，该工作是通过重载Panel控件的Render方法实现的，代码如下：

if  (Collapsed)
{                    
        _contents.Style.Add("display", "none");
    _image.ImageUrl = LinkImageCollapsed;
}

其中的_contents.Style.Add()为内容显示层增加了style.display="none"，这样就可以在初始化时隐藏内容区。