设置TextInput控件获得焦点时边框的某一角为圆角.

TextInput控件的focusRoundedCorners样式学习.

示例：

代码：

<?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>

你可以在标签内直接设置属性：

<?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>

或者通过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>