CSS3边框半径+不同边框宽度，丑陋的过渡

Question

我遇到了另一个棘手的 CSS3 情况，让我头疼不已。我正在使用 CSS 设计一个表单，使其在两侧有一个 10px 的边框，在底部有一个 12px 的边框，结合 15px 的边框半径。

不幸的是，12px 和 10px 边界的过渡点不是渐变的，而是有一个 2px 的 block 从边界内部伸出。示例(为清楚起见放大了尺寸):

http://jsfiddle.net/LnKND/1/

知道如何仅使用 css 而不使用额外元素来解决这个问题吗？或者这就是它当前呈现的方式，我应该寻找其他解决方案吗？

Answer 1

添加

    border-bottom-left-radius:10px 20px;
    border-bottom-right-radius:10px 20px;

引用:http://www.w3.org/TR/css3-background/#the-border-radius

---

用于 mozilla

    -moz-border-radius-bottomright
    -moz-border-radius-bottomleft

如果您愿意，尽管它会自动处理问题(如果您在示例中将拼写错误 p 更正为 px)。

引用:https://developer.mozilla.org/en/CSS/border-bottom-right-radius