colors - CSS - 边框半径：背景图像颜色不适合

Question

我有一个 HTML 和 CSS 的标题菜单。垂直菜单的左右末端应该有圆形边框和不同的背景图像。如果没有圆形边框功能，它可以正常工作，并且（菜单的右端）看起来像这样：

当我在 css 中添加“border-radius:”功能时，就会出现问题：

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

现在示例如下所示：

正如您在此处看到的，整个菜单背景（从左侧开始）和右侧部分背景之间的颜色不合适（仅在底部出于未知原因）我已经使用 Firefox 22 对其进行了测试、Safari 6 和 IE 10 - 都具有相同的结果。

有谁知道，为什么会发生这种情况以及如何解决？

谢谢

Answer 1

感谢您的所有回答！我做了一个 jsfiddle 并自己找出了问题的原因：

这是jsfiddle：http: //jsfiddle.net/vFTYh/

问题是，我在菜单下方有一个 div 容器 20px。这个 div 有一个 50px 的阴影。

-moz-box-shadow: 0 0 50px #000;
-webkit-box-shadow: 0 0 50px#000;
box-shadow: 0 0 50px #000;

如果我添加这个阴影，菜单背景和菜单背景的左侧部分会受到不同的影响。

Answer 2

可能您会保留这种解决方案。否则-您还可以使用img作为角来实现圆角...