Chrome - 儿童剪辑css3圆角边框？答案

【问题标题】：Chrome - children clip css3 rounded border?Chrome - 儿童剪辑css3圆角边框？
【发布时间】：2011-07-22 06:04:40
【问题描述】：

请看下面的 JSFiddle：

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

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

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

【问题讨论】：

【解决方案1】：

实际上，您只需将position:relative 添加到child 元素即可。

【讨论】：

【解决方案2】：

将child 元素的半径设为其parent 的一半border-radius。

border-top-left-radius: 5px;

【讨论】：

【解决方案3】：

【讨论】：