RoundedCorners锐化边角控件 功能: 专门用来锐化控件的边角。RoundedCorners控件和DropShadow控件的锐化效果一样,缺点是没有阴影效果,优点是可以只锐化4个边角中的任意一个或多个。 属性: TargetControlID:被锐化的控件ID。 Radius:锐化幅度。 Corners:要锐化的边角,All表示所有边角。 代码实例: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>RoundedCorners 控件</title> <style type="text/css"> .roundedPanel {}{ width:300px; background-color:#B347A9; color:blue; font-weight:bold; } </style> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" CssClass="roundedPanel"> <div style="padding:10px;text-align:center"> <div style="padding:5px; border:solid black thin;background-color:#B4B4B4;"> <asp:Image ID="Image1" ImageUrl="~/Images/AJAX.gif" runat="server" /> </div> </div> </asp:Panel> <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" BehaviorID="RoundedCornersBehavior1" TargetControlID="Panel1" Color="#ff8800" > </ajaxToolkit:RoundedCornersExtender> <input type="radio" id="radius0" name="radiusValues" value="0" onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" /> <label for="radius0">None</label> <input type="radio" id="radius2" name="radiusValues" value="2" onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" /> <label for="radius2">2px</label> <input type="radio" id="radius4" name="radiusValues" value="4" onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" /> <label for="radius4">4px</label> <input type="radio" id="radius6" name="radiusValues" value="6" onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" checked="checked" /> <label for="radius6">6px</label> <input type="radio" id="radius10" name="radiusValues" value="10" onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" /> <br /> 选择某个边角 <input type="checkbox" id="corner1" name="cornerValues" value="1" onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" /> <label for="corner1">Top Left</label> <input type="checkbox" id="corner2" name="cornerValues" value="2" onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" /> <label for="corner2">Top Right</label> <input type="checkbox" id="corner8" name="cornerValues" value="8" onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" /> <label for="corner8" >Bottom Left</label> <input type="checkbox" id="corner4" name="cornerValues" value="4" onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" /> <label for="corner4">Bottom Right</label> </form> </body> </html> 运行结果: