Я столкнулся с проблемой, когда граница внешнего div с закругленными углами обрезается внутренним элементом с градиентом CSS3. Это ошибка с CSS3 - если да, я с радостью отправлю отчет об ошибке.Это ошибка с CSS3: закругленные углы с градиентом CSS3
Если нет, то как это исправить?
Источник & Demo здесь: http://jsfiddle.net/joshuamcginnis/2aJ8X/
Скриншот:
Проблема не в градиенте - дайте вашему <h2> элемент сплошного фона, чтобы его увидеть. Вместо этого вам нужно закруглить углы <h2>, а также обернуть <div>.
Добавить border-radius: 10px 10px 0 0; и соответствующие версии конкретных производителей для модели <h2>, и все это работает.
Это решение работает для всех браузеров, кроме IE. Я только пробовал это в IE9, где градиентная заливка, кажется, «течет» над границами. (Или я что-то не хватает?) См .: http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding – cfouche
Округлые углы не работают в IE8 или менее – Downpour046
это решение не хорошо, если контейнер имеет переполнение: видимый и прокручиваемый, и я столкнулся с этой проблемой RIGHT NOW ... – vsync
Это не относится к фоновых градиентов. Это только фон h2-элемента, перекрывающегося на вершине закругленных углов. Я не уверен это ошибка в строгом смысле слова, но она довольно хорошо известна. Самое простое «исправить» - округление углов элемента с фоном. Example: just setup for chrome
переполнение: скрыто; не работает
но это делает:
h2
{
position:relative;
z-index:-1;
....
}
отличное решение, оно работает лучше всего. – vsync
это довольно распространенная проблема при установке фона на другой элемент к закругленными углами. – Spudley