在选项卡导航器中设置选项卡下角的圆角半径

Question

使用CSS，我可以在选项卡导航器中设置选项卡顶角的圆角半径：

<mx:Style>
    .tabstyle
    {
        corner-radius: 10;
    }
</mx:Style>

<mx:TabNavigator tabStyleName="tabstyle" />

但是，我也希望底角有一个半径。有谁知道该怎么做？

Answer 1

假设您放入 TabNavigator 中的项目是标准 Flex 控件集的一部分，您可以让它们使用自定义编程皮肤来绘制其背景/边框以匹配您所需的外观。幸运的是，制作一个程序化皮肤相对容易 获取样式信息（例如角半径值）并使用它来控制图形的绘制方式 - 只需在互联网上浏览一下，您一定会找到Flex 3 中的换肤教程。

Answer 2

ZackBeNimble 的答案效果很好，但实际上我还有一个额外的要求，即任何布局都应该易于更改。所以我现在所做的是将选项卡的皮肤设置为具有我想要的角半径的图像。

<mx:Style>
    .tabstyle
    {
        skin: Embed(source="../images/corner_radius_tabs.png", scaleGridLeft="44", scaleGridRight="45", scaleGridTop="1", scaleGridBottom="2"); 
        padding-left: 44;
        padding-right: 44;
    }
</mx:Style>

<mx:TabNavigator tabStyleName="tabstyle" />

Answer 3

扩展@ZackBeNimble 的答案
使用 degrafa:

皮肤组件可能更容易：

<degrafa:GraphicBorderSkin xmlns:degrafa="namespaceLovin">

<degrafa:geometry>
    <degrafa:GeometryComposition>
        <degrafa:RoundedRectangleComplex topLeftRadius="0" topRightRadius="0" bottomLeftRadius="5" bottomRightRadius="5"
                        height="{skinHeight}"
                        width="{skinWidth}"
                        fill="{someFill}" />

</degrafa:geometry>


</degrafa:GraphicBorderSkin>

您需要填充。另外，skinWidth 和 height 是他们在测试版中添加的 degrafa 内部变量——如果您使用旧版本来获取 unscaledwidth 和 unscaledheight，则必须覆盖 updatedisplaylist。

然后在您要剥皮的组件中，设置以下样式： borderSkin="package.class.location"

如果您不熟悉传统的程序化剥皮，可能会更快一点...我更喜欢 el degrafa。