css - 边界半径部分损坏

Question

我尝试了overflow:hidden打破背景的解决方案：http border-radius: //jsfiddle.net/ypjDC/17/

<div style="width: 200px; border: 3px solid; border-radius: 7px; overflow: hidden;">
  <div style="float: left; width: 50px; background-color: #800000;">
    <p>test</p>
  </div>

  <div style="float: right; width: 50px; background-color: #800000;">test</div>

  <div style="clear: both;"></div>
</div>

但总有一个问题，你可以在角落看到一点空白。

我该如何纠正？

Answer 1

您可以将具有与边框颜色相同的插入框阴影添加到主 DIV ：

<div style="width: 200px; border: 3px solid; border-radius: 7px; overflow: hidden;box-shadow: 0px 0px 0px 1px #000 inset;">

它稍微修改了您的边框外观，但删除了白色区域。

小提琴