仅应用于特定拐角的拐角半径

发布于 2024-09-26 00:48:01 字数 923 浏览 7 评论 0原文

我有这个选项卡，我只想在右上角和左上角制作圆角。但最终它把四个角都圆了。

：

<mx:TabNavigator id="myTabNav" x="58" y="61" width="584"  height="200" creationComplete="setColors(event)" styleName="myTabStyle">
  <pages:One  label="ThisOne" id="one"  name="One"/>
  <pages:Two label="Twoooooooooooh" id="two"  width="584" name="two" />
  <pages:Three label="Threeeeeeeeh" id="three"  width="583" name="three" />
</mx:TabNavigator>

我做了什么

我的 pageStyles.css 文件是：

.myTabStyle {
 tabStyleName: "myTabs"; 

 corner-radius:15;
}

.myTabs {
 backgroundColor: #FF0080;
 corner-radius:10;
 focusRoundedCorners: "tl tr";
 skin:ClassReference('mx.skins.spark.ButtonSkin'); 
 chromeColor: #FF0080;  /* this is the tab widget itself, not the content */
 border-style:outset;
}

如您所见，我有“focusRoundedCorners”指向右上角和左上角，但没有运气。我得到的是：

我做错了什么？

提前致谢。

原文

I've this tabs that I wanted to make rounded only on top-right and top-left corners. But it ended up rounding all 4 corners.

What I did:

<mx:TabNavigator id="myTabNav" x="58" y="61" width="584"  height="200" creationComplete="setColors(event)" styleName="myTabStyle">
  <pages:One  label="ThisOne" id="one"  name="One"/>
  <pages:Two label="Twoooooooooooh" id="two"  width="584" name="two" />
  <pages:Three label="Threeeeeeeeh" id="three"  width="583" name="three" />
</mx:TabNavigator>

and

my pageStyles.css file is:

.myTabStyle {
 tabStyleName: "myTabs"; 

 corner-radius:15;
}

.myTabs {
 backgroundColor: #FF0080;
 corner-radius:10;
 focusRoundedCorners: "tl tr";
 skin:ClassReference('mx.skins.spark.ButtonSkin'); 
 chromeColor: #FF0080;  /* this is the tab widget itself, not the content */
 border-style:outset;
}

As you can see I have the "focusRoundedCorners" to point to top-right and top-left but no luck. What I got is:

What am I doing wrong guys??

Thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

左岸枫 2024-10-03 00:48:01

看看这个工具http://www.wabysabi.com/flex/enhancedbuttonskin/

我猜想 focusRoundedCorners 的 focus 部分指的是当它仅具有焦点时应该如何。

回复收藏 0 原文

魔 2024-10-03 00:48:01

所以这就是解决方案。

您可以编写自己的按钮皮肤或使用此处的按钮皮肤 http://www.wabysabi.com/flex/增强按钮皮肤/
命名为EnhancedButtonSkin.as（右键单击，查看源代码）。
然后声明您的 TabNavigator 组件并指定其 tabStyleName。

<mx:TabNavigator y="0" height="100%" right="0" left="0" id="navigator" tabStyleName="tab">

现在 css：

 <fx:Style>
  .tab
  {
   upSkin:ClassReference('com.EnhancedButtonSkin');
   overSkin:ClassReference('com.EnhancedButtonSkin');
   downSkin:ClassReference('com.EnhancedButtonSkin');
   disabledSkin:ClassReference('com.EnhancedButtonSkin');
   selectedUpSkin:ClassReference('com.EnhancedButtonSkin');
   selectedOverSkin:ClassReference('com.EnhancedButtonSkin');
   selectedDownSkin:ClassReference('com.EnhancedButtonSkin');
   selectedDisabledSkin:ClassReference('com.EnhancedButtonSkin');

   cornerRadii: 5, 5, 0, 0;
   borderColors: #CC0000, #000000;
   overBorderColors: #003399, #003399;
   selectedBorderColors: #666666, #FFFFFF;
   borderThickness: 1;
   borderAlpha: 1;
   fillColors: #CC3300, #F98900;
   fillAlphas: 1, 1;
   fillColorRatios: 0, 255;
   overFillColors: #999999, #FFFFFF;
   overFillAlphas: 1, 1;
   overFillColorRatios: 0, 255;
   selectedFillColors: #999999, #FFFFFF;
   selectedFillAlphas: 1, 1;
   selectedFillColorRatios: 111, 255;
   highlightAlphas: 0, 0;
   color: #000000;
   textRollOverColor: #000000;
   fontSize: 13;
  }
 </fx:Style>

这个 css 将显示：

So here is the solution.

You can write you own button skin or use the one here http://www.wabysabi.com/flex/enhancedbuttonskin/
named EnhancedButtonSkin.as (right-click, View-Source).
Then declare your TabNavigator component and specify its tabStyleName.

<mx:TabNavigator y="0" height="100%" right="0" left="0" id="navigator" tabStyleName="tab">

And now the css:

 <fx:Style>
  .tab
  {
   upSkin:ClassReference('com.EnhancedButtonSkin');
   overSkin:ClassReference('com.EnhancedButtonSkin');
   downSkin:ClassReference('com.EnhancedButtonSkin');
   disabledSkin:ClassReference('com.EnhancedButtonSkin');
   selectedUpSkin:ClassReference('com.EnhancedButtonSkin');
   selectedOverSkin:ClassReference('com.EnhancedButtonSkin');
   selectedDownSkin:ClassReference('com.EnhancedButtonSkin');
   selectedDisabledSkin:ClassReference('com.EnhancedButtonSkin');

   cornerRadii: 5, 5, 0, 0;
   borderColors: #CC0000, #000000;
   overBorderColors: #003399, #003399;
   selectedBorderColors: #666666, #FFFFFF;
   borderThickness: 1;
   borderAlpha: 1;
   fillColors: #CC3300, #F98900;
   fillAlphas: 1, 1;
   fillColorRatios: 0, 255;
   overFillColors: #999999, #FFFFFF;
   overFillAlphas: 1, 1;
   overFillColorRatios: 0, 255;
   selectedFillColors: #999999, #FFFFFF;
   selectedFillAlphas: 1, 1;
   selectedFillColorRatios: 111, 255;
   highlightAlphas: 0, 0;
   color: #000000;
   textRollOverColor: #000000;
   fontSize: 13;
  }
 </fx:Style>

This css will display:

回复收藏 0 原文

~没有更多了~