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

<%@ 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    {}{            background-color:#5377A9;            color:white;        font-weight:bold;        </style>

编译后运行效果如下：

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

完整示例代码下载：http://files.cnblogs.com/Terrylee/RoundedCornersDemo.rar

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Atlas学习手记(15):使用RoundedCorners为控件加上圆角效果

关键词：atlas