Quando applico il raggio di bordo e un gradiente di sfondo a <li>, gli angoli arrotondati appaiono irregolari e ruvidi. Check it out on this jsfiddleborder-radius + gradient + box-shadow che causa il bordo irregolare
L'ho visto in Chrome e FF. Se rimuovo il gradiente O il raggio del bordo, il problema scompare.
Qualche idea del perché questo sta accadendo e come potrei risolverlo?
UPDATE: Sto lavorando su una soluzione jQuery che si basa sull'idea di Josh F (vedere la sua risposta completa qui sotto). È una semplice funzione jQuery che aggiunge una copia duplicata dell'elemento dietro di essa. Al momento, gli script impostano il posizionamento dell'elemento di destinazione su relative. (Ho potuto vedere questo essere problematico in alcuni casi.) Il mio codice è jsfiddle here.
Freddo. Buono a sapersi. Conosci qualche soluzione (oltre a tornare a uno sfondo di file immagine?)? – emersonthis
@Emerson, utilizzando uno sfondo di file immagine * non * risolverà lo sfondo. Questo è un problema con il modo in cui viene disegnato lo sfondo stesso e non è specifico per i gradienti (vedi [esempio jsFiddle] (http://jsfiddle.net/wCtgh/1/)). La mia tipica soluzione è usare un 'box-shadow' e' background che non sia * troppo * lontano dallo sfondo 'del genitore. Mentre il divario trasparente è ancora visibile, non è così evidente. Non è l'ideale, ma funziona. Un'altra opzione sarebbe quella di non usare 'border-radius' (dato che questo è il colpevole principale). – 0b10011
Huh. Penso di seguire ciò che stai dicendo, ma sembra che anche il gradiente faccia parte del problema. No? Quando guardo il tuo jsFiddle (con sfondo piatto) su Chrome, il problema non c'è. – emersonthis