CSS закругленные углы в Tabs небольшой вопрос

У меня есть этот код http://jsfiddle.net/Kbzgd/ то, что я пытаюсь сделать это в правом верхнем углу его имеют округлую эффект Aswell ...CSS закругленные углы в Tabs небольшой вопрос

Но если я удалить границы дна и добавьте эту границу к контенту, например border-top, активная вкладка получит эту границу внизу, и я не хочу, чтобы это = \

Я хочу, чтобы это было так, но с закругленным углом в верхнем правом углу, возможно ?

Благодаря

источник

2012-05-20 Bruno Gaspar

Попробуйте border-top-right-radius: 5px на .tab_content_container

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

border-top-right-radius: 6px; 
border-top: 1px solid #CCC; 
position: relative; 
top: -1px; 
z-index: -10;

Так правый угол выглядит немного лучше. Альтернативой является использование box-shadow: 0 -1px 0 0 #CCC (тень над div) вместо значений border-top и top.

Редактировать: После некоторого редактирования я немного избавился от выпадения (вы увидите, внимательно посмотрите на приведенные выше примеры).

Все, что вам нужно сделать, это удалить границу на ul (граница/тень от div работает нормально, если вы установите z-index за ul). Обратите внимание, что когда вы перемещаете границу, она немного сдвигается, поэтому вы можете установить position: relative; top: 1px; обратно на ul.

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

Вот мой окончательный CSS:

ul.tabs { 
    border-bottom: 1px solid rgba(0, 0, 0, 0); /*this is an alternative which sets the border to be transparent*/ 
    float: left; 
    height: 29px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

.tab_content_container { 
    background: #fff; 
    border-radius: 0 0 5px 5px; 
    border: 1px solid #ccc; border-top: none; 
    clear: both; 
    float: left; 
    width: 100%; 
    border-top-right-radius: 6px; 
    /*border-top: 1px solid #CCC; 
    /*top: -1px; again some alternatives*/ 
    position: relative; 
    z-index: -10; 
    box-shadow: 0 -1px 0 0 #CCC 
}

источник

2012-05-20 23:40:35 Raekye

Спасибо Raeki, с вашим кодом я только что отредактировал ширину ul.tabs по ширине: 99%; и теперь он выглядит отлично! –

Ха-ха, это тоже подшучивало - я добавил альтернативное решение, которое вы могли бы взглянуть на это тоже. Счастливое кодирование! – Raekye

Хммм в http://jsfiddle.net выглядит нормально, но на моем веб-сайте он скрывает содержимое, z-index это hidding ... –

Здесь: http://jsfiddle.net/2CVNj/ Добавлен новый DIV вокруг вкладок, чтобы использовать overflow: auto solution, чтобы очистить поплавки, а затем перешел границу на верхней части содержания и возился с некоторыми Z-индексы. Работает красиво.

источник

2012-05-20 23:53:29 daniero

CSS закругленные углы в Tabs небольшой вопрос

ответ

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