Question

请看这个小提琴：

注意标题正在切断边界半径，任何想法为什么？

由于

Answer 1

.pod-header s的渐变与.pod上的圆角重叠，因为您没有围绕.pod-header。它们不会从父元素继承圆角。

要解决此问题，请使用此CSS围绕.pod-header元素的顶角（仅限）：

    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;

Answer 2

你给一个类边界半径，内部类给出背景但没有半径（所以它仍然有一个方角）。

查看updated fiddle

中的CSS

Answer 3

您还需要在内部div上设置border-radius。

例如使用此：

#pod-container .pod .pod-header {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */
    border-radius: 6px;

    border-bottom: 1px solid #CCC;
}

使用border-radius时为什么会切断边框？

3 个答案: