Występuje problem, w którym granica zewnętrznego elementu div z zaokrąglonymi rogami jest odcinana przez wewnętrzny element z gradientem CSS3. Jest to błąd w CSS3 - jeśli tak, z przyjemnością przedstawię zgłoszenie błędu.Czy to błąd z CSS3: Zaokrąglone rogi z gradientem CSS3
Jeśli nie, jak to naprawić?
Źródło & Demo tutaj: http://jsfiddle.net/joshuamcginnis/2aJ8X/
Zrzut ekranu:
Problem nie jest gradientem - nadaj elementowi <h2> solidne tło. Zamiast tego należy zaokrąglić rogi modelu <h2>, a także opakowania <div>.
Dodaj border-radius: 10px 10px 0 0; i odpowiednie wersje dla danego dostawcy do stylu <h2> i wszystko działa.
To rozwiązanie działa we wszystkich przeglądarkach z wyjątkiem IE. Próbowałem go tylko w IE9, gdzie wypełnienie gradientowe wydaje się "przepływać" po granicach. (Czy coś mi brakuje?) Zobacz: http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding – cfouche
Zaokrąglone rogi nie działają w IE8 lub mniej – Downpour046
to rozwiązanie nie jest dobrze, jeśli pojemnik jest przepełniony: widoczny i jest przewijany, i mam taki problem TERAZ ... – vsync
To nie jest specyficzny dla gradientów tle. To tylko tło nakładającego się elementu h2, siedzącego na szczycie zaokrąglonych rogów. Nie jestem na pewno to błąd w ścisłym tego słowa znaczeniu, ale jest dość dobrze znany. Najłatwiejszą "poprawką" jest zaokrąglanie narożników elementu w tle. Example: just setup for chrome
przepełnienie: ukryte; nie działa
ale to robi:
h2
{
position:relative;
z-index:-1;
....
}
świetne rozwiązanie, działa najlepiej. – vsync
jest to dość powszechny problem, kiedy ustawić tło na innym elemencie do zaokrąglonych rogach. – Spudley