CSS border-radius以深色流血

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 preffix，对border-radius的支持为good enough。

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 on anchor使用5px到div容器

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