Terry's blog

Focus on bigdata and cloud.

博客园 首页 新随笔 联系 订阅 管理
功能:
    专门用来锐化控件的边角。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 />
选择某个边角 
&nbsp;

  
<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>
运行结果:
        
posted on 2007-11-12 16:29  王晓成  阅读(1239)  评论(0编辑  收藏  举报