Sto riscontrando un problema in cui il bordo di un div esterno con angoli arrotondati viene troncato da un elemento interno con un gradiet CSS3. Si tratta di un bug con CSS3 - se è così, presenterò volentieri un bug-report.Si tratta di un bug con CSS3: angoli arrotondati con gradiente CSS3
In caso negativo, come posso risolvere questo problema?
Fonte & Demo qui: http://jsfiddle.net/joshuamcginnis/2aJ8X/
Screenshot:
Il problema non è il gradiente: dare all'elemento <h2> uno sfondo solido da vedere. Invece, è necessario arrotondare gli angoli dello <h2> e del wrapping <div>.
Aggiungi border-radius: 10px 10px 0 0; e le versioni specifiche del fornitore appropriate allo stile <h2> e tutto funziona.
Questa soluzione funziona per tutti i browser tranne IE. L'ho provato solo in IE9, dove il riempimento sfumato sembra "scorrere oltre" i bordi. (Oppure mi manca qualcosa?) Vedi: http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding – cfouche
Gli angoli arrotondati non funzionano in IE8 o meno – Downpour046
questa soluzione non è buono se il contenitore ha overflow: visibile ed è scorrevole, e sto affrontando quel problema ORA GIUSTO ... – vsync
Non è specifico per fondo gradienti. È solo lo sfondo dell'elemento h2 che si sovrappone sedendosi in cima agli angoli arrotondati. Non sono sicuro è un bug nel senso più stretto, ma è abbastanza noto. La 'soluzione' più semplice è arrotondare gli angoli dell'elemento con lo sfondo. Example: just setup for chrome
overflow: nascosto; non funziona
ma questo fa:
h2
{
position:relative;
z-index:-1;
....
}
ottima soluzione, funziona al meglio. – vsync
si tratta di un problema abbastanza comune quando si imposta lo sfondo su un elemento diverso per gli angoli arrotondati. – Spudley