专门用来锐化控件的边角。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 >
运行结果:
< 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 >