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);

另一種選擇是將元素包裝在兩個邊界半徑父項中。

對我來說似乎很老套，但比雙包裝選項要好得多——有興趣聽聽其他解決方案。