Chrome 忽略了我在 hover 上的菜单的圆角

Question

我遇到了 Chrome 忽略 hover 上菜单的圆角的问题。 这适用于 Firefox 以及在 hover 之前圆角（镀铬），但是在 hover 上我的角向上。 我错过了什么吗？ 我的 HTML 由标准 ul 组成。

#nav > ul > li:first-child a:hover {
-moz-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomleft: 4px !important;
-border-bottom-left-radius: 4px !important;
-moz-border-radius-topleft: 4px;
-webkit-border-radius-topleft: 4px !important;
-border-top-left-radius: 4px !important;
background: url(../images/menu-back-hover.png) repeat-x;
}

Answer 1

webkit 浏览器（即 chrome）的选择器应该是：

-webkit-border-top-left-radius:  4px;
-webkit-border-bottom-left-radius:  4px;

Answer 2

以下适用于父元素，边框半径适用于将 webkit 踢回对我来说：

-webkit-mask-image: -webkit-radial-gradient(white, black);

另一种选择是将元素包装在两个边界半径父项中。

对我来说似乎很老套，但比双包装选项要好得多——有兴趣听听其他解决方案。