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

---

　本文示例源代码或素材下载

　　主要内容

　　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页面的顶部加入：

<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>

　　添加一个Panel作为我们的目标控件，即要添加圆角效果的控件：

<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 type="text/css">
　　.roundedPanel
　　{}{　　
　　　　width:300px;
　　　　background-color:#5377A9;　　
　　　　color:white;
　　　　font-weight:bold;　　　　
　　}
</style>

　　编译后运行效果如下：

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

本文作者:

---

« 
» 

---