Atlas学习手记（15）：使用RoundedCorners为控件加上圆角效果

RoundedCorners是AtlasControlToolkit中的一个Extender，利用它可以轻松地为ASP.NET中的控件加上圆角效果。

主要内容

1．RoundedCorners介绍

2．简单示例

一．RoundedCorners介绍

RoundedCorners是AtlasControlToolkit中的一个Extender，利用它可以轻松地为ASP.NET中的控件加上圆角效果。简单的示例代码如下：

<atlasToolkit:RoundedCornersExtender ID="rce" runat="server">

<atlasToolkit:RoundedCornersProperties

Color="#ff0000"

TargetControlID="Panel1"

Radius="10">

</atlasToolkit:RoundedCornersProperties>

</atlasToolkit:RoundedCornersExtender>
它的属下如下：

属性	描述
TargetControlID	要添加圆角效果的目标控件ID
Radius	圆角的半径，以px为单位，默认值为5px
Color	可以设置颜色

二．简单示例

RoundedCorners的使用非常简单，下面看一个例子。新建Web Site后，在ASPX页面的顶部加入：

<asp:Panel ID="Panel1" runat="server" Width="300px" CssClass="roundedPanel">

<div style="padding:10px;text-align:center">

<div style="padding:5px; border:solid black thin;background-color:#B4B4B4;">

<asp:Image ID="Image1" runat="server" ImageUrl="atlas_title.jpg" /><br />

</div>

</div>

</asp:Panel>
添加RoundedCornersExtender，设置相关的属性如下：

<atlasToolkit:RoundedCornersExtender ID="rce" runat="server">

<atlasToolkit:RoundedCornersProperties

Color="#ff0000"

TargetControlID="Panel1"

Radius="10">

</atlasToolkit:RoundedCornersProperties>

</atlasToolkit:RoundedCornersExtender>
用到的CSS样式：

</style>
编译后运行效果如下：



不添加圆角效果时的效果：



完整示例代码下载