Страницы

Поиск по вопросам

пятница, 15 марта 2019 г.

Как убрать видимость ободка у внешнего border-radius?

Заметил такую неприятную особенность у border-radius, когда при наложении фона вложенного элемента (в данном случае li) на внешний (ul) виден неприятный ободок. фидл
ul { background-color: #000; display: inline-block; height: 50px; line-height: 50px; padding: 0; border-radius: 4px 0 0 4px; } li { display: inline-block; list-style: none; } li.active { background-color: yellow; border-radius: 4px 0 0 4px; } a { text-decoration: none; }



Ответ

Вариант другой - псевдоэлементы. Но, если у вас глаз настолько алмаз, что различия ширины в 1px - это слишком, то он не для вас. Суть - у li.active нет border-radius, к первому и последнему элементу меню присваиваем дополнительный класс, который обеспечивает их соответствующими псевдоэлементами с абсолютным позиционированием. Сдвиаем их(псевдоэлементы) на 1px, скрывая все, что нужно скрыть. Профит, вы великолепны. http://codepen.io/malginovdesign/pen/KzXWQN?editors=1100
/* оформление */ * { box-sizing: border-box; } div { background: darkgrey; padding: 0 20px; width: 800px; margin: 0 auto; border-radius:4px; } a { text-decoration:none; color: #f9f9f9; } /* объект */ ul { display:inline-block; height:50px; line-height:50px; padding: 0; border-radius:4px; width: 100%; background: #333; } li { display:inline-block; list-style:none; width: calc(100% / 5); text-align:center; position: relative; } .active.first-link:before { content: ''; position: absolute; top: 0; left: -1px; height: 100%; width: 5px; background: darkorange; border-radius: 4px 0 0 4px; } .active.last-link:after { content: ''; position: absolute; top: 0; right: -2px; height: 100%; width: 5px; background: darkorange; border-radius: 0 4px 4px 0; } .active { background-color: darkorange; }


Комментариев нет:

Отправить комментарий