Question

我使用GWT s StackLayoutPanel ,试图通过在以下CSS规则中应用 边界-radius 属性绕过信头的角:

.mm-StackPanelHeader {
  padding-left: 7px;
  font-weight: bold;
  font-size: 1.4em;
  width: 200px;
  border-radius: 5px 5px 0px 0px;
  background: #d3def6;
  border: 0.5px solid #bbbbdd;
}

当信头项目倒塌时, 边界不会完全覆盖对方, 显示丑陋的白色角落的尽头。

如何解决这个问题?

s 这里的""http://imageshack.us/photo/my-images/805/stackoverflow.jpg/"rel=“nofollow”>outputs short ,供参考。

Answer 1

StackLayootPanel 绝对是比 StackPanel 更新的版本。

但我用后一种方法来对付这个案子是因为没有其他办法而且它就像一个魅力!

感谢大家!

Answer 2

假设你将前往", http://gwt.google.com/samples/Showcase/showcase.html#!CwStackPanel" rel=“nofollow noreferrer”> 旧部件看起来感觉 , 实现同样的结果将不可避免地涉及替换图像和乱动部件布局属性(例如应用负差、改变偏移) 。

尽管如此,我还是设法找到一个快速的基于CSS(CSS)的解决方案,该解决方案似乎针对你的需要,并且不受进一步操纵。我相信有一个更准确的解决方案可以找到,因为这一尝试远非完美,但它应该为您提供一个良好的起点。

Abstract

要模拟旧部件外观 :

Round up the top corners for the item headers.
Apply a background color to the underling container, to avoid those ugly white corners.
Use top round corners on that container as well, to avoid ugly blue corners on it as a result of the background color applied.
Reset the bottom padding of the header items to re-center their content.

Implementation

在您的样式表中添加以下规则 :

.gwt-StackLayoutPanel,
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
    background-color: #D3DEF6;
    border-radius: 5px 5px 0 0;
}
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
    padding-bottom: 0;
}

Illustration

以下为GWT展示的现场例子, 通过操控 CSS 属性所生成的最终结果简况:

"https://i.sstatic.net/jNwb4.png" alt="修改过的斯塔克布局面板"/ >

Abstract

Implementation

Illustration

友情链接