gwt圆形面板（基于标准的小部件，类似于DecoratorPanel）

Question

我正在尝试编写一个使用圆角构建应用程序的应用程序。我找到了一个package on google code，它有一个RoundedLinePanel，它似乎有用......有点像。

我想知道一些事情。这是人们用来创建GWT圆角的div吗？ release notes表示近一年没有改变。

另外，我似乎无法设置此div的固定高度（setHeight将其设置在包装div上，而不是内部div）。所以这对我来说没用，因为我有一个固定高度的应用程序。

最后，如果有人可以建议一个更好的机制来创建GWT中的圆角div，我会全力以赴。

Answer 1

使用CSS 3有一种漂亮的方法来圆角（因此在IE＆lt; = 8中不起作用，但在IE9开发者预览中也是如此）。查看http://css3please.com/以查看所涉及的样式。使用border-radius（或-moz-border-radius或-webkit-border-radius属性）相当简单。在GWT中，只需将想要的样式类名称添加到想要具有圆角边框的元素中即可。当然，在传统浏览器中支持圆角更难，但你需要这样做吗？

对于旧版浏览器而言，这取决于实际情况而言更加困难。它总是涉及边界的图像。您必须创建掩盖框边框的图像。有效的是in this answer所描述的技巧。要在GWT中使用它，您可以使用uibinder，htmlelement或创建自己的小部件。也可以找到对该技术的更广泛解释here。

Answer 2

最常见的解决方案，decoratorPanel，在当前版本的GWT中被弃用（例如，如果你将它与GWT 2.1.1一起使用，你将会遇到GWT所需的doctype之间的无法比拟的混乱，decoratorPanel和IE，尤其是IE8）。

所需的GWT 2.1.1 doctype（！doctype html）也会禁用IE8的流行圆角_htc。

您可以使用CSS3系列圆角属性来添加类，但它们不适用于9之前的IE版本。

JQuery和其他javascript圆角与本机GWT js发生冲突的概率很高，所以我们放弃了这些作为可能的解决方案，尽管我个人没有对它们进行测试。

我们不得不使用圆角图像才能真正实现跨浏览器兼容并创建一致的外观。