У меня возникает проблема, когда граница внешнего div с закругленными углами становится срезанной внутренним элементом с градиентом CSS3. Это ошибка с CSS3 - если да, я с радостью отправлю отчет об ошибке.
Если нет, как это исправить?
Источник и демонстрация здесь: http://jsfiddle.net/joshuamcginnis/2aJ8X/
Скриншот:
Проблема не в градиенте - дайте вашему элементу <h2> сплошной фон, чтобы видеть. Вместо этого вам нужно обойти углы <h2>, а также обертывания <div>.
Добавьте border-radius: 10px 10px 0 0; и соответствующие версии, относящиеся к конкретным производителям, к стилю <h2>, и все это работает.
переполнения: скрытый; не работает
но это делает:
h2
{
position:relative;
z-index:-1;
....
}
Это не зависит от фоновых градиентов. Это только фон h2-элемента, перекрывающегося на вершине закругленных углов. Я не уверен, это ошибка в строгом смысле слова, но она довольно хорошо известна. Самое простое "исправить" - округление углов элемента с фоном. Пример: просто установите для chrome