flex4圆角效果

[b]Flex4中SkinnableContainer圆角边框设置[/b]
Flex4中BorderContainer有一个cornerRadius属性，通过设置该属性，即可实现圆角边框效果，但设置这个属性后，4个角都会变圆，有的时候可能会有这么一种需求：我只需要设置某一两个角变圆，或者几个圆角的弧度都不一样，这个时候，cornerRadius属性的设置显然就不能满足需求。
ps:在Flex4之前可以设置borderSides属性达到类似效果，如：borderSides="top left right"
在Flex4中borderSides属性貌似已经没有了（其实flex3中很多的属性，在flex4中都没有了，已经换了其他实现方式）
那么，在flex4中要如何做才能达到上面说的效果呢？
看代码：
首先，写一个skin：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        alpha.disabled="0.5">

    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata>

    <!-- states -->
    <s:states>
        <s:State name="disabled" />
        <s:State name="normal" />
    </s:states>

    <!-- SkinParts
    name=contentGroup, type=spark.components.Group, required=false
    -->

    <s:Rect left="0" top="0" right="0" width="100%" height="100%" 
            topLeftRadiusX="25">
        <s:stroke>
            <s:SolidColorStroke color="#AEADB0" alpha="0.5" scaleMode="none"/>
        </s:stroke>
        <s:fill>
            <mx:LinearGradient>
                <mx:entries>
                    <mx:GradientEntry color="0x333333" ratio="0.00" alpha="0.5"/>
                    <mx:GradientEntry color="0xfefef3" ratio="0.33" alpha="0.5"/>
                    <mx:GradientEntry color="0x333333" ratio="0.66" alpha="0.5"/>
                </mx:entries>
            </mx:LinearGradient>
        </s:fill>
    </s:Rect>

    <s:Group id="contentGroup" left="1" right="1" top="1" bottom="1"/>
</s:Skin>

使用这个skin：

<s:SkinnableContainer width="20%" height="50" top="2" horizontalCenter="0"
                      skinClass="com.flyhigh.skin.BorderContainerSkin">

</s:SkinnableContainer>

转自：[url]http://www.cnblogs.com/syxc/archive/2011/01/03/1925030.html[/url]
[b]圆角TextInput[/b]
在flex4中spark布局的样式都是用skin来控制，不像flex3中的mx可以使用属性来控制样式。所以spark控件已经没有了cornerRadius属性，所以要实现圆角输入框，就需要使用skin来实现。以下是实现代码，一看就明白。
[b]DateFieldSkin:[/b]

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark">

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>

    <!---@private -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0"
        radiusX="{getStyle('cornerRadius')}" radiusY="{getStyle('cornerRadius')}">
        <s:stroke>          
            <!---@private -->
            <s:SolidColorStroke id="borderStroke" color="0x5380D0"/>
        </s:stroke>
        <s:fill>
            <!---@private -->
            <s:SolidColor id="bgFill" color="0xFFFFFF"/>
        </s:fill>
    </s:Rect>
</s:Skin>

[b]Sample App:[/b]
<?xml version="1.0" encoding="utf-8"?>

<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    minWidth="1024" minHeight="768">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        .roundedTI
        {
            corner-radius:10;
            borderStyle: solid;
            borderSkin: ClassReference("DateFieldSkin");
        }

    </fx:Style>

    <mx:DateField textInputStyleName="roundedTI"/>

</s:Application>

摘自：[url]http://stackoverflow.com/questions/2264876/answer/submit[/url]