Это ошибка с CSS3: закругленные углы с градиентом CSS3

Question

Я сталкиваюсь с проблемой, когда граница внешнего элемента с закругленными углами обрезается внутренним элементом с помощью градиента CSS3.Это ошибка в CSS3 - если так, я с удовольствием отправлю отчет об ошибке.

Если нет, как мне это исправить?

Источник и демонстрация здесь : http://jsfiddle.net/joshuamcginnis/2aJ8X/

Снимок экрана:

Answer 1

Проблема не в градиенте - выделите элементу <h2> сплошной фон, чтобы увидеть.Вместо этого вам нужно закруглить углы <h2>, а также обтекания <div>.

Добавьте border-radius: 10px 10px 0 0; и соответствующие специфичные для поставщика версии к стилю <h2>, и все это работает.

Answer 2

переполнение: скрытый;не работает

но это работает:

h2
{
  position:relative;  
  z-index:-1;
....
}

Answer 3

Это не относится к фоновым градиентам.Это просто фон перекрывающего элемента h2, сидящего на вершине закругленных углов.Я не уверен это ошибка в самом строгом смысле этого слова, но она достаточно известнаСамое простое «исправление» - это скругление углов элемента с фоном. Пример: просто настройка для хрома