css - CSS边框半径出血与深色

Question

我有一个包含框，border-radius然后我在容器中有一个元素，它也有一个border-radius集合，它与框的边缘对接。

包含框在内框的边缘周围“流血”：

你可以在这里看到它的作用：http: //jsfiddle.net/Shpigford/RUAMx/

我怎样才能解决这个问题？

Answer 1

为容器边框设置更大的半径很容易：

div {
    background:white;
    border-radius: 5px 8px 8px 5px;
}

见这里http://jsfiddle.net/RUAMx/2/

此外，您不必再使用 -webkit 和 -moz 前缀，对border-radius 的支持已经足够好了。

Answer 2

解决方案之一只是稍微移动锚标记，就像这样http://jsfiddle.net/RUAMx/3/

a {
    color:white;
    float:right;
    display:block;
    background:#201f23;
    padding:10px 20px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-right: -5px;
}

并在锚点上补偿这个 -5px 使用 5px 到 div 容器

div {
    background:white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 5px;
}