Пограничный радиус не влияет на внутренние элементы

У меня есть макет, где все содержимое страницы находится в коробке с закругленными углами. Это включает заголовок страницы и т. Д. У меня есть элемент div, который содержит мое содержимое заголовка, div, которое содержит основное содержимое страницы, и div, содержащий нижний колонтитул. Моя проблема такова: поскольку граница моего «заголовка» div не закруглена, большой «контейнер» div, кажется, не округляется вверху. Я исследовал и показал, что это просто «заголовок» div, накладывающий себя над «контейнером» div. У меня есть пример здесь: http://jsfiddle.net/V98h7/.Пограничный радиус не влияет на внутренние элементы

Я попытался обогнуть границу «заголовка» div в той же степени, но это создает небольшой дефект на границе (он получает границу самостоятельно, из «заголовка» div «s цвет фона) , Из-за отчаяния я также попытался установить z-индекс контейнера на большое количество. Это ничего не делало.

Я чувствую, что должно быть простое решение этой проблемы. Я не хочу исправления javascript. Я бы предпочел CSS, но МЕНЬШЕ тоже в порядке.

источник

2012-06-13 diracdeltafunk

Помните, что LESS - это просто препроцессор для CSS. Почему упоминание LESS вообще, если оба языка одинаково сильны? – Mitja

Вот скрипка - http://jsfiddle.net/ashwyn/V98h7/2/

Add -

#outer { 
    overflow:hidden 
}

и он будет работать.

источник

2012-06-13 05:25:38 Ashwin

ЭТО, что я искал. Я попробую! – diracdeltafunk

Совсем недавно у меня была эта проблема. Благодарю. – Ashwin

Хммм ...вот что-то странное. Я получаю кучу пространства между моим заголовком div и вершиной внешнего div. а именно, область, где начинается радиус – diracdeltafunk

здесь обновление jsfiddle

http://jsfiddle.net/V98h7/1/

Чтобы просто круглые углы границы border-radius может принимать 4 значения TOP-LEFT RADIUSTOP-RIGHT RADIUSBOTTOM-RIGHT RADIUSBOTTOM-LEFT-RADIUS

так border-radius: 20px 20px 0 0; завершат свой внутренний DIV сверху. Не забудьте использовать то же значение радиуса, что и для родительского div, иначе вы увидите дополнительную границу.

источник

2012-06-13 05:24:55 Rishabh

Как я уже сказал в своем сообщении, это вызывает сбои в некоторых браузерах. – diracdeltafunk

Можете ли вы сказать, какие браузеры также помогут мне в тестировании. Я использую тот же код в разных проектах. – Rishabh

В Chrome я вижу эту ошибку. Он очень слаб, но присутствует. – diracdeltafunk

-1

Попробуйте дать контейнеру div чуть больший радиус границы (на верхних двух углах), чем заголовок div.

источник

2012-06-13 05:25:29

Хорошая идея, я проверю это. – diracdeltafunk

Используйте это:

#outer { overflow: hidden; }

или это:

#inner1 { 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
}

Или, может быть, можно попробовать следующее:

#outer div:first { 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
}

(Примечание: я не проверял последний вариант выше).

источник

2012-06-13 05:28:47

Пограничный радиус не влияет на внутренние элементы

ответ

Смежные вопросы