Sto riscontrando un problema con Chrome che ignora il fileangoli arrotondati del mio menu al passaggio del mouse. Questo funziona in Firefox e per arrotondare gli angoli (in cromo) prima del passaggio del mouse, tuttavia al passaggio del mouse i miei angoli si allineano. Mi sto perdendo qualcosa? Il mio HTML è costituito da un ul standard.
#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;
}
risposte:
6 per risposta № 1Il selettore per i browser webkit (ovvero chrome) dovrebbe essere:
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
0 per risposta № 2
Quanto segue applicato all'elemento padre con il raggio del bordo applicato per rimettere in moto il webkit per me:
-webkit-mask-image: -webkit-radial-gradient(white, black);
Un'altra opzione è quella di avvolgere l'elemento in due genitori con raggio di confine.
Sembra hacky per me, ma molto meglio dell'opzione double wrap - interessato ad ascoltare altre soluzioni.