示例:
代码:
<?
xml version="1.0" encoding="utf-8"
?>
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:Script >
<![CDATA[
private function checkBox_change(evt:Event):void {
var corners:Array = [];
if (tLeft.selected) {
corners.push("tl");
}
if (tRight.selected) {
corners.push("tr");
}
if (bLeft.selected) {
corners.push("bl");
}
if (bRight.selected) {
corners.push("br");
}
var str:String = corners.join(" ");
textInput.setStyle("focusRoundedCorners", str);
focusManager.setFocus(textInput);
}
]]>
</ mx:Script >
< mx:ApplicationControlBar dock ="true" >
< mx:Form styleName ="plain" >
< mx:FormItem label ="top left (tl):" >
< mx:CheckBox id ="tLeft"
selected ="true"
change ="checkBox_change(event);" />
</ mx:FormItem >
< mx:FormItem label ="top right (tr):" >
< mx:CheckBox id ="tRight"
selected ="true"
change ="checkBox_change(event);" />
</ mx:FormItem >
< mx:FormItem label ="bottom left (bl):" >
< mx:CheckBox id ="bLeft"
selected ="true"
change ="checkBox_change(event);" />
</ mx:FormItem >
< mx:FormItem label ="top right (br):" >
< mx:CheckBox id ="bRight"
selected ="true"
change ="checkBox_change(event);" />
</ mx:FormItem >
</ mx:Form >
</ mx:ApplicationControlBar >
< mx:TextInput id ="textInput"
focusThickness ="10"
cornerRadius ="10" />
</ mx:Application >
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:Script >
<![CDATA[
private function checkBox_change(evt:Event):void {
var corners:Array = [];
if (tLeft.selected) {
corners.push("tl");
}
if (tRight.selected) {
corners.push("tr");
}
if (bLeft.selected) {
corners.push("bl");
}
if (bRight.selected) {
corners.push("br");
}
var str:String = corners.join(" ");
textInput.setStyle("focusRoundedCorners", str);
focusManager.setFocus(textInput);
}
]]>
</ mx:Script >
< mx:ApplicationControlBar dock ="true" >
< mx:Form styleName ="plain" >
< mx:FormItem label ="top left (tl):" >
< mx:CheckBox id ="tLeft"
selected ="true"
change ="checkBox_change(event);" />
</ mx:FormItem >
< mx:FormItem label ="top right (tr):" >
< mx:CheckBox id ="tRight"
selected ="true"
change ="checkBox_change(event);" />
</ mx:FormItem >
< mx:FormItem label ="bottom left (bl):" >
< mx:CheckBox id ="bLeft"
selected ="true"
change ="checkBox_change(event);" />
</ mx:FormItem >
< mx:FormItem label ="top right (br):" >
< mx:CheckBox id ="bRight"
selected ="true"
change ="checkBox_change(event);" />
</ mx:FormItem >
</ mx:Form >
</ mx:ApplicationControlBar >
< mx:TextInput id ="textInput"
focusThickness ="10"
cornerRadius ="10" />
</ mx:Application >
你可以在标签内直接设置属性:
<?
xml version="1.0" encoding="utf-8"
?>
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:TextInput id ="textInput"
focusThickness ="10"
cornerRadius ="10"
focusRoundedCorners ="tl br" />
</ mx:Application >
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:TextInput id ="textInput"
focusThickness ="10"
cornerRadius ="10"
focusRoundedCorners ="tl br" />
</ mx:Application >
或者通过CSS设置:
<?
xml version="1.0" encoding="utf-8"
?>
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:Style >
TextInput {
focusRoundedCorners: "tl br";
}
</ mx:Style >
< mx:TextInput id ="textInput"
focusThickness ="10"
cornerRadius ="10" />
</ mx:Application >
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:Style >
TextInput {
focusRoundedCorners: "tl br";
}
</ mx:Style >
< mx:TextInput id ="textInput"
focusThickness ="10"
cornerRadius ="10" />
</ mx:Application >