CSS3边框半径+不同的边框宽度，难看的过渡答案

【问题标题】：CSS3 border radius + different border width, ugly transitionCSS3边框半径+不同的边框宽度，难看的过渡
【发布时间】：2010-12-09 16:40:32
【问题描述】：

我遇到了另一个棘手的 CSS3 情况，我正在努力解决这个问题。我正在使用 CSS 为表单设置样式，使其两侧有 10 像素的边框，底部有 12 像素的边框，并结合 15 像素的边框半径。

不幸的是，12px 和 10px 边框的过渡点不是渐变的，而是有一个 2px 的块从边框内部伸出。示例（为清楚起见放大了尺寸）：

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

【问题讨论】：

你用的是什么浏览器？我认为我无法复制您在使用 firefox 3.6/ie9 时遇到的问题
您的 jsfiddle 示例有一个错误 - -moz-border-radius: 0 0 25px 15p; 缺少 x 末尾的 15px。这意味着它在 Firefox 中不起作用。
顺便说一句，有点题外话，但如果你想要 IE6/7/8 中的边框半径，请查看css3pie.com
错字仅在示例中，不在我的原始来源中。我正在使用 chrome，尚未针对其他浏览器进行优化。我知道 css3pie，但还是谢谢 :)

标签： css

【解决方案1】：

添加

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

Mozilla 使用

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

如果你愿意，虽然它会自动处理问题（如果你在示例中将拼写错误 p 修复为 px）。

【讨论】：

这似乎解决了它，但我留下了一个方形的内边框。我希望内部和外部都是圆形的，这仅在边框半径大于边框宽度时才有效。所以这给我留下了一个问题：P
@Stephan，看起来它是一个 chrome buggy 实现。这是一个巨大的展示muddledramblings.com/table-of-css3-border-radius-compliance以获取更多信息。
哇，有趣的链接。非常感谢。