创建圆角Web 2.0面板的指南

在当今的互联网上，经常可以看到许多网站使用具有圆角的"Web 2.0"风格的面板。尽管有许多服务器控件可以实现类似的效果，但并非所有方法都能达到最佳性能和易用性。本文将介绍一种简单且高效的解决方案，旨在创建一个无需图片和JavaScript即可实现圆角效果的服务器控件。

由于没有一种“正确”的方法来创建圆角，选择了认为最简单且性能最高的解决方案。从可扩展性的角度来看，使用图片并不理想。尽管非常喜欢JavaScript，但也想为那些关闭了JavaScript的客户端做好准备。最后，希望将所有这些功能封装到一个拖放式的服务器控件中，以便在Visual Studio中进行最少的配置，并且当然要兼容跨浏览器。

代码实现

控件本身只包含五个属性和一个重写的方法。用户可以配置面板的边框颜色、文本颜色、内部背景颜色、外部背景颜色以及面板内的文本。当然，可以在面板中嵌套控件（它继承自ASP Panel控件），但有时不需要配置标签控件。设置文本可以使操作更简单。

该方法简单地重写了RenderContents方法，以输出所需的CSS，这些CSS嵌套在style标签中，以及组成面板的div和嵌套标签。修改了CSS，使其通过其唯一的客户端ID引用元素，从而可以在页面上有多个具有不同样式的面板（如上面的截图所示）。所有其他的设计功能都是从Panel控件继承的，包括可见性。

最后，确保在段落标签之间渲染任何子控件。这使得最终的面板渲染看起来整洁美观。是的，也可以选择使用output.WriteBeginTag("p");。喜欢C# if (HasControls()) { output.Write("\n

"); this.RenderChildren(output); output.Write("\n

使用代码

在可下载的源代码中包含了输出DLL（Web2Controls.dll）以及代码文件。只需将其添加到工具箱中，将控件拖放到页面上，然后开始添加嵌套控件。所有属性都位于“Rounded Panel”类别下，并设置了默认值。面板还考虑了不同的高度和宽度单位。可以使用百分比或像素。

由于它继承了Panel控件的设计属性，所以在运行之前不会得到面板的图形表示（颜色和样式方面）。它将简单地显示为任何Panel一样，可以在其上拖放控件。