Flex 3 - 自定义皮肤按钮中的阴影

发布于 2024-12-15 17:22:47 字数 842 浏览 1 评论 0原文

我很难去除按钮控件中某种类型的阴影。

这是按钮：
在此处输入图像描述

给我带来麻烦的按钮是“缩放器”按钮。正如您所看到的，边界不是直的。我假设有某种渐变/阴影或其他东西是从默认皮肤继承的。

翻转时，会出现同样的问题，但不太明显：
在此处输入图像描述

我正在使用 css 对其进行换肤。
这是按钮的声明：

<mx:Button id="zoomButton" 
           paddingLeft="7" paddingRight="7"
           height="24" textAlign="center" fontSize="10"
           buttonMode="true"
           styleName="intZoomButtonStyle"
           icon="{Assets.MISC_ZOOM_ICON_SMALL}"/>

这是 css：

.intZoomButtonStyle{
    fill-colors: #ffffff, #ffffff;
    fill-alphas: 1, 1;
    border-color: #ffffff;
    shadow-color: #ffffff;
    theme-color: #ffffff;
    corner-radius: 0;
}

谁能帮我解决这个问题？

谢谢：）

原文

I'm having a hard time removing some type of shadow in a button control.

Here's the button:
enter image description here

The button that's giving me trouble is the "zoomer" one. As you can see, the borders are not straight. I assume that there's some kind of gradient/shadow or sth that's inherited from the default skin.

On rollover, the same issue appears but it's a little bit less visible:
enter image description here

I'm using css to skin it.
Here's the button's declaration:

<mx:Button id="zoomButton" 
           paddingLeft="7" paddingRight="7"
           height="24" textAlign="center" fontSize="10"
           buttonMode="true"
           styleName="intZoomButtonStyle"
           icon="{Assets.MISC_ZOOM_ICON_SMALL}"/>

And here's the css:

.intZoomButtonStyle{
    fill-colors: #ffffff, #ffffff;
    fill-alphas: 1, 1;
    border-color: #ffffff;
    shadow-color: #ffffff;
    theme-color: #ffffff;
    corner-radius: 0;
}

Could anyone help me on this one?

Thanks :)

分享到QQ

分享到微博

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

发布评论

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

彼岸花似海 2024-12-22 17:22:47

我想这可能会帮助您Style Explorer进行进一步验证

~~ ~~~~~~编码愉快~~~~~~~~~~

回复收藏 0 原文

一片旧的回忆 2024-12-22 17:22:47

我最终使用了图像来为按钮设置皮肤。这就是 CSS 的外观：

.intZoomButtonStyle{
    fill-colors: #ffffff, #ffffff;
    fill-alphas: 1, 1;
    border-color: #ffffff;
    theme-color: #ffffff;
    corner-radius: 0;

    up-skin: Embed("assets/miscellaneous/blank.jpg");
    down-skin: Embed("assets/miscellaneous/blank.jpg");
    over-skin: Embed("assets/miscellaneous/blank.jpg");
}

blank.jpg 只是一个白色的方形图像。

瞧！
它仍然困扰着我，无法使用简单的 css 来做到这一点，但是，找到了可行的东西......

I finally used an image to skin the button. This is how the css looks:

.intZoomButtonStyle{
    fill-colors: #ffffff, #ffffff;
    fill-alphas: 1, 1;
    border-color: #ffffff;
    theme-color: #ffffff;
    corner-radius: 0;

    up-skin: Embed("assets/miscellaneous/blank.jpg");
    down-skin: Embed("assets/miscellaneous/blank.jpg");
    over-skin: Embed("assets/miscellaneous/blank.jpg");
}

blank.jpg is simply a white squared image.

And voilà!
It still bothers me not being able to do that using a simple css but well, found sth that works...

回复收藏 0 原文

~没有更多了~