flex4圆角效果
Flex4中SkinnableContainer圆角边框设置
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"                      skinname="code"><?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>

Sample App:
<?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>

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