google-chrome - Chrome - 儿童剪辑css3圆角边框？

Question

请参阅以下 JSFiddle：

请注意，子 div 剪辑了其父级的边框。如果我删除边框（但保留圆角），项目会按我们的预期剪辑。Firefox 4 按我的预期呈现这个标记，在边框开始之前剪辑项目。但是，Chrome 在到达边框的外边缘之前不会剪裁子项。

谁的这种行为是正确的，是否存在黑客行为？如果它是一个将被修复的错误，我可以将它留在 chrome 中，但如果它在 Chrome 中呈现为规范，我将需要调整布局。

（在您投票关闭之前请注意，这是一个与多个线程不同的错误，该错误与关于 firefox 3.5/Chrome 错误的多个线程不同，该错误会阻止项目被圆形边框完全剪裁）

score 2 · Accepted Answer

2

实际上，您需要做的就是添加position:relative到child元素中。

于 2012-02-23T00:58:51.857 回答

score 1 · Accepted Answer

Give the child element a radius of half the border-radius of its parent.

border-top-left-radius: 5px;

score 0 · Accepted Answer

0

于 2011-10-06T19:54:50.943 回答

3 回答 3