开发者

Chrome is ignoring the rounded corners of my menu on hover

开发者 https://www.devze.com 2023-03-16 07:02 出处:网络
I\'m having an issue with Chrome ignoring the rounded corners of my menu on hover. This works in Firefox as well as to round the corners (in chrome) before the hover, however on hover my corners squar

I'm having an issue with Chrome ignoring the rounded corners of my menu on hover. This works in Firefox as well as to round the corners (in chrome) before the hover, however on hover my corners square up. Am I missing something? My HTML consists of a standard ul.

#nav > ul > li:first-child a:hover {
-moz-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomleft: 4px !important;
-border-botto开发者_运维技巧m-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;
}


The selector for webkit browsers (i.e. chrome) should be:

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


The following applied to the parent element with the border radius applied to kick webkit back into line for me:

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

Another option is to wrap the element in two border radius parents.

Seems hacky to me, but far better than the double wrap option – interested to hear other solutions.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号