StackLayoutPanel在圆角处显示白色末端

Question

我正在使用GWT的StackLayoutPanel并尝试通过在以下CSS规则中应用border-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;
}

当折叠标题项时，边框不会完全覆盖彼此，显示丑陋的白色角落末端。

如何解决这个问题？

以下是output's snapshot，供参考。

Answer 1

假设您要使用old widgets' look n' feel，实现完全相同的结果将不可避免地涉及替换图像和弄乱窗口小部件的布局属性（例如应用负边距，更改偏移）。

话虽如此，我设法得到了一个基于CSS的快速解决方案，似乎可以满足您的需求，而且无需进一步操作。我确信有更准确的解决方案，因为这种尝试远非完美，但它应该为您提供一个良好的起点。

抽象

模拟旧小部件的外观：

• 整理项目标题的顶角。
• 将背景颜色应用于下方容器，以避免那些丑陋的白色角落。
• 使用该容器上的顶部圆角，以避免因应用背景颜色而导致丑陋的蓝色角落。
• 重置标题项的底部填充以重新定位其内容。

实施

将以下规则添加到样式表中：

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

插图

这是最终结果的快照，通过操纵GWT展示现场示例中的CSS属性创建：

Answer 2

嗯，StackLayoutPanel绝对是一个比StackPanel更新的版本。

但是我在这种情况下使用了后者，因为没有其他方法，它就像一个魅力！

感谢所有人！